Jquery 使用ajax更新数据表内容
我正在使用AJAX处理DataTables,在加载页面时生成一个表。我的代码的第一部分工作得很好。然后我有一个下拉列表,用于过滤DataTable中的用户。我可以选择usersname并向控制器发送POST请求,它将生成json数据。但我找不到一种方法来发送这个json数据并更新DataTable。这是我的密码:Jquery 使用ajax更新数据表内容,jquery,json,ajax,asp.net-mvc,datatable,Jquery,Json,Ajax,Asp.net Mvc,Datatable,我正在使用AJAX处理DataTables,在加载页面时生成一个表。我的代码的第一部分工作得很好。然后我有一个下拉列表,用于过滤DataTable中的用户。我可以选择usersname并向控制器发送POST请求,它将生成json数据。但我找不到一种方法来发送这个json数据并更新DataTable。这是我的密码: public ActionResult IndividualUser() { var taskAnswer = new List<TaskAnsw
public ActionResult IndividualUser()
{
var taskAnswer = new List<TaskAnswerView>();
return View(taskAnswer);
}
public ActionResult IndividualUserGetData(string id)
{
var now = DateTime.Now;
var applicationUser = db.Users.FirstOrDefault(x => x.UserName == id);
if (applicationUser != null)
{
var userId = applicationUser.Id;
var user = db.Users.Find(userId);
var list = db.TasksModels
.Join(db.TaskToUsers, t => t.TasksModelID, usr => usr.TasksModelID, (t, usr) => new { t, usr })
.Where(t1 => t1.usr.UserIdInt == user.ApplicationUserId)
.Select(t1 => new
{
t1.t.Heading,
t1.t.TasksModelID,
t1.t.EndDate,
t1.t.StartDate,
t1.t.Content,
t1.t.CreatedBy,
t1.t.CreatedOn,
Status = t1.t.EndDate > now && t1.t.StartDate < now ? "Open" : "Closed",
ttu = t1.t.TaskToUsers.Select(t => new
{
reply = t.ReplyToTasks.Where(x => x.TaskToUser.UserIdInt == user.ApplicationUserId).Select(r => new
{
answer = r.UserAnswer,
answerTime = r.AnswerTime,
}),
user = db.Users.Where(f => f.ApplicationUserId == user.ApplicationUserId).Select(u => new
{
fullName = u.Name + " " + u.Surname
})
})
}).ToList();
return Json(new { data = list }, JsonRequestBehavior.AllowGet);
}
else
{
var data = db.TasksModels.Select(s => new
{
s.Heading,
s.StartDate,
s.EndDate,
s.CreatedBy,
s.CreatedOn,
Status = s.EndDate > now && s.StartDate < now ? "Open" : "Closed",
ttu = s.TaskToUsers.Select(t => new
{
reply = t.ReplyToTasks.Select(r => new
{
answer = r.UserAnswer,
answerTime = r.AnswerTime,
}),
user = db.Users.Where(f => f.ApplicationUserId == t.UserIdInt).Select(u => new
{
fullName = u.Name + " " + u.Surname
})
})
}).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
}
public ActionResult IndividualUser()
{
var taskAnswer=新列表();
返回视图(taskAnswer);
}
public ActionResult IndividualUserGetData(字符串id)
{
var now=DateTime.now;
var applicationUser=db.Users.FirstOrDefault(x=>x.UserName==id);
if(applicationUser!=null)
{
var userId=applicationUser.Id;
var user=db.Users.Find(userId);
var list=db.TasksModels
.Join(db.TaskToUsers,t=>t.TasksModelID,usr=>usr.TasksModelID,(t,usr)=>new{t,usr})
.Where(t1=>t1.usr.useridit==user.applicationserid)
.选择(t1=>新建
{
t1.t.标题,
t1.t.TasksModelID,
t1.t.EndDate,
t1.t.起始日期,
t1.t.内容,
t1.t.CreatedBy,
t1.t.CreatedOn,
Status=t1.t.EndDate>now&&t1.t.StartDatenew
{
reply=t.ReplyToTasks.Where(x=>x.TaskToUser.useridit==user.applicationserid)。选择(r=>new
{
答案=r.UserAnswer,
应答时间=r.应答时间,
}),
user=db.Users.Where(f=>f.applicationserid==user.applicationserid)。选择(u=>new
{
全名=u.姓名+“”+u.姓氏
})
})
}).ToList();
返回Json(新的{data=list},JsonRequestBehavior.AllowGet);
}
其他的
{
var data=db.TasksModels.Select(s=>new
{
s、 标题,
s、 开始日期,
s、 结束日期,
s、 由,
s、 CreatedOn,
Status=s.EndDate>now&&s.StartDatenew
{
reply=t.ReplyToTasks.选择(r=>new
{
答案=r.UserAnswer,
应答时间=r.应答时间,
}),
user=db.Users.Where(f=>f.applicationSerid==t.useridit)。选择(u=>new
{
全名=u.姓名+“”+u.姓氏
})
})
}).ToList();
返回Json(new{data=data},JsonRequestBehavior.AllowGet);
}
}
@model IEnumerable
@{
ViewBag.Title=“个人用户”;
var options=new AjaxOptions()
{
Url=Url.Action(“IndividualUserGetData”),
LoadingElementId=“loadingIndicator”,
};
}
@使用(Ajax.BeginForm(选项))
{
@DropDownList(“id”,新选择列表(new[]){“Ragim-A”,“qurban”
}(“穆拉德”))
加载。。。
细节
@DisplayNameFor(model=>model.Heading)
@DisplayNameFor(model=>model.StartDate)
@DisplayNameFor(model=>model.EndDate)
@DisplayNameFor(model=>model.CreatedBy)
@DisplayNameFor(model=>model.CreatedOn)
@DisplayNameFor(model=>model.Status)
}
@节脚本
{
$(文档).ready(函数(){
$.fn.dataTable.moment('DD/MM/YYYY');
$.fn.dataTable.moment('dddddd,DD/MM/yyyyy');
var oTable=$(“#myTable”).DataTable({
回答:是的,
“ajax”:{
“url”:“/TasksModels/IndividualUserGetData”,
“类型”:“获取”,
“数据类型”:“json”
},
“columnDefs”:[
{“className”:“dt中心”,“目标”:6}
],
“订单”:[[3]],
“栏目”:[
{
“类”:“详细信息控制”,
“可订购”:错误,
“数据”:空,
“defaultContent”:”
},
{“data”:“Heading”,“autoWidth”:true},
{
“数据”:“起始日期”,
“自动宽度”:正确,
“渲染”:函数(数据、类型、行){
如果(类型=='display'| |类型=='filter'){
var rowvalueallday=行[“结束日期”];
如果(rowvalueallday==0){
返回(时刻(数据).format(“ddd-DD/MM/YYYY”);
}否则{
返回(时刻(数据).format(“MMMM-Do-YYYY,HH:mm”);
}
}
返回数据;
}
},
{
“数据”:“结束日期”,
“自动宽度”:正确,
“渲染”:函数(数据、类型、行){
如果(类型=='display'| |类型=='filter'){
var rowvalueallday=行[“结束日期”];
如果(rowvalueallday==0){
返回(时刻(数据).format(“ddd-DD/MM/YYYY”);
}否则{
@model IEnumerable<DeadLiner.Models.TaskAnswerView>
@{
ViewBag.Title = "Individual User";
var options = new AjaxOptions()
{
Url = Url.Action("IndividualUserGetData"),
LoadingElementId = "loadingIndicator",
};
}
@using (Ajax.BeginForm(options))
{
<div class="tablecontainer">
<p>
@Html.DropDownList("id", new SelectList(new[] { "Ragim-A", "qurban"
}, "Murad"))
<input type="submit" value="Submit" />
</p>
<div id="loadingIndicator" style="display:none;">Loading...</div>
<table class="table table-bordered ui" id="myTable">
<thead>
<tr>
<th>
Details
</th>
<th>
@Html.DisplayNameFor(model => model.Heading)
</th>
<th>
@Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
@Html.DisplayNameFor(model => model.EndDate)
</th>
<th>
@Html.DisplayNameFor(model => model.CreatedBy)
</th>
<th>
@Html.DisplayNameFor(model => model.CreatedOn)
</th>
<th>
@Html.DisplayNameFor(model => model.Status)
</th>
</tr>
</thead>
</table>
</div>
}
@section scripts
{
<script>
$(document).ready(function () {
$.fn.dataTable.moment('DD/MM/YYYY');
$.fn.dataTable.moment('dddd, DD/MM/YYYY');
var oTable = $("#myTable").DataTable({
responsive: true,
"ajax": {
"url": "/TasksModels/IndividualUserGetData",
"type": "get",
"datatype": "json"
},
"columnDefs": [
{ "className": "dt-center", "targets": 6 }
],
"order": [[3]],
"columns": [
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "Heading", "autoWidth": true },
{
"data": "StartDate",
"autoWidth": true,
"render": function (data, type, row) {
if (type === 'display' || type === 'filter') {
var rowvalueallday = row["EndDate"];
if (rowvalueallday == 0) {
return (moment(data).format("ddd DD/MM/YYYY"));
} else {
return (moment(data).format("MMMM Do YYYY, HH:mm"));
}
}
return data;
}
},
{
"data": "EndDate",
"autoWidth": true,
"render": function (data, type, row) {
if (type === 'display' || type === 'filter') {
var rowvalueallday = row["EndDate"];
if (rowvalueallday == 0) {
return (moment(data).format("ddd DD/MM/YYYY"));
} else {
return (moment(data).format("MMMM Do YYYY, HH:mm"));
}
}
return data;
}
},
{ "data": "CreatedBy", "autoWidth": true },
{
"data": "CreatedOn",
"autoWidth": true,
"render": function (data, type, row) {
if (type === 'display' || type === 'filter') {
var rowvalueallday = row["EndDate"];
if (rowvalueallday == 0) {
return (moment(data).format("ddd DD/MM/YYYY"));
} else {
return (moment(data).format("MMMM Do YYYY, HH:mm"));
}
}
return data;
}
},
{
"data": "Status",
"autoWidth": true,
"render": function (data) {
if (data == "Open") {
return '<i class="fa fa-unlock bat" aria-hidden="true" style="color:green;"></i>';
}
return '<i class="fa fa-lock bat" aria-hidden="true" style="color:red;"></i>';
}
}
]
});