JQuery DataTables无法识别加载的数据

时间:2015-08-17 14:45:07

标签: javascript asp.net-mvc-4 datatables

出于某种原因,我的JQuery DataTable正在向表中添加数据,但它仍然表示0个条目中的0到0。尝试使用搜索框实际上并不搜索我的数据,按我的一列排序不会改变顺序。我在萤火虫中没有任何错误,所以我真的不知道从哪里开始。谢谢你的期待。

这是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>

以下是我得到的截图:

enter image description here

1 个答案:

答案 0 :(得分:1)

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

查看传递给&amp;的参数。来自服务器here。您没有传递任何此类信息 - 例如,您获得了Showing 0 of 0 entries,因为您没有在json数据中返回iTotalRecordsiTotalDisplayRecords。返回的对象应如下所示:

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

如果查看Firebug的Net面板,您可以在加载数据表时查看请求中发送的所有参数。您需要在服务器代码中获取这些内容并在查询中使用它们,例如sSearch进行搜索,iDisplayStartiDisplayLength进行分页。

我会做这样的事情:

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