Jquery 使用ajax更新数据表内容

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

我正在使用AJAX处理DataTables,在加载页面时生成一个表。我的代码的第一部分工作得很好。然后我有一个下拉列表,用于过滤DataTable中的用户。我可以选择usersname并向控制器发送POST请求,它将生成json数据。但我找不到一种方法来发送这个json数据并更新DataTable。这是我的密码:

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>';
                    }
                }
            ]
        });