JQuery DataTables 无法识别加载的数据

Question

出于某种原因，我的 JQuery DataTable 正在向 table 添加数据，但它仍然显示“0 到 0 个条目，共 0 个条目。尝试使用搜索框实际上并没有搜索我的数据，按我的一列排序不会改变顺序。我在 firebug 中没有收到任何错误，所以我真的不知道从这里去哪里。谢谢你的观看。

这里是 javascript:

var oTable = $("#tblAddUsers").dataTable({
            "processing": true,
            "bSearching": true,
            "bSort": true,
            "bFilter": true,
            sAjaxSource: '@Url.Action("GetUserList", "ClassSchedule")',
            aoColumns: [
                {
                    bVisible: false
                },
                {
                    sWidth: "250px",
                    bSortable: true

                },
                {
                    mRender: function () { return '<button class="clAddUser">Add</button>'; },
                    sWidth: "200px"
                }
            ],

            fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                $('button', nRow).on('click', function () { 
                    test(aData[0]);
                });
            }


        });

我的控制器代码：

public JsonResult GetUserList()
    {
        var addUserList = (from u in db.t_user
                           join m in db.t_user_membership on u.user_id equals m.user_id
                           where m.membership_date > DateTime.Today
                           select new { user_id = u.user_id, full_name = u.first_name + " " + u.last_name }).ToList();

        return Json(new { aaData = addUserList.Select(x => new string [] { x.user_id.ToString(), x.full_name }) }, JsonRequestBehavior.AllowGet);
    }

我的 GET 响应如下所示：

{"aaData":[["2","test Spouse"],["3","David Parker"]]}

这是我的 HTML:

<div id="AddUserPopup" style="display:none" title="">
<span>Add Users</span>
<div style="width: 500px; height: 300px;" id="dialog">
        <table id="tblAddUsers">
            <thead>
                <tr>
                    <th></th>
                    <th>User Name</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

</div>

这是我得到的截图：

Answer 1

使用服务器端数据源时，您需要在服务器代码中处理搜索、排序和分页。

查看传递给服务器的参数以及从服务器传递的参数 here。您没有传递任何此类信息 - 例如，您得到 Showing 0 of 0 entries 因为您没有在 json 数据中返回 iTotalRecords 和 iTotalDisplayRecords。返回的对象应如下所示：

return Json(new
{
    param.sEcho,
     iTotalRecords = rowCount,
     iTotalDisplayRecords = rowCount,
    aaData = result,
 }, JsonRequestBehavior.AllowGet)

如果您查看 Firebug 的网络面板，您可以看到加载数据表时请求中发送的所有参数。您需要在您的服务器代码中获取这些并在您的查询中使用它们，例如 sSearch 用于搜索，iDisplayStart 和 iDisplayLength 用于分页。

我会这样做：

public JsonResult GetUserList(jQueryDataTableParamModel p)
{
    var addUserList = from u in db.t_user
       join m in db.t_user_membership on u.user_id equals m.user_id
       where m.membership_date > DateTime.Today
       select new mymodel
       { 
           user_id = u.user_id, 
           full_name = u.first_name + " " + u.last_name 
       };
//paging
    var displayedItems = addUserList.Skip(p.iDisplayStart).Take(p.iDisplayLength);
    var rowCount = addUserList.Count();

//  project into json for datatable
    var result = from d in displayedItems
                         select new object[]
                         {
                            d.user_id,
                            d.full_name
                          };
    return Json(new
    {
        param.sEcho,
        iTotalRecords = rowCount,
        iTotalDisplayRecords = rowCount,
        aaData = result,
     }, JsonRequestBehavior.AllowGet);
}

jQueryDataTableParamModel 参数来自一个关于在 MVC 中使用服务器端数据表的好教程 here

JQuery DataTables 无法识别加载的数据

JQuery DataTables does not recognize data loaded

javascript

datatables

asp.net-mvc-4