MVC.JQuery.DataTables - 排序不起作用

时间:2017-11-24 19:35:43

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

我在我的一个项目中使用MVC.JQuery.DataTables版本1.5.36。 我正在使用Ajax选项从服务器端查询数据。

用于检索数据的Controller操作如下:

        public async Task<ActionResult> GetAllMyTasksTable(DataTablesParam dataTableParam, DateRangeQueryOption queryParameters)
    {
        var currentUser = await UserService.CurrentUser();
        var timezoneOffsetMinutes = UserSettings.UTCOffsetMinutes;
        var tasks = TaskBoardService.GetAllMyTasks(currentUser, queryParameters, timezoneOffsetMinutes).OrderBy(t => t.DueDate).ThenBy(t => t.ListTitle);
        return DataTablesResult.Create(tasks.Select(t => new SPTaskViewModel(t.Id, t.Title)
        {
            ListTitle = t.ListTitle,
            DueDateString = t.DueDateString,
            Status = t.Status,
            Effort = t.Effort,
            WorkUnits = t.WorkUnits,
            TotalWork = t.TotalWork
        }).AsQueryable().Cast<SPTaskViewModel>(), dataTableParam, new ResponseOptions<SPTaskViewModel>() { ArrayOutputType = ArrayOutputType.ArrayOfObjects });
    }

JavaScript中客户端的数据表配置如下:

  function CreateMyTasksDataTable(elementId, url, data) {
    if (tasksTable != null) {
        tasksTable.destroy();
    }
    tasksTable = $('#' + elementId).DataTable({
        "language": {
            "url": "/scripts/locales/DataTable/@(Model.DatatableLanguageCode).json"
        },
        dom: '<"html5buttons"B>lTfgitp',
        buttons: [
            { extend: 'copy' },
            { extend: 'csv' },
            { extend: 'excel', title: '@Strings.MyTasks' },
            { extend: 'pdf', title: '@Strings.MyTasks' },
            {
                extend: 'print',
                customize: function (win) {
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');

                    $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                }
            }
        ],
        autoWidth: false,
        pageLength: 50,
        responsive: true,
        ajax: { url: url, type: "POST", data: data },
        serverSide: true,
        searching: false,
        stateSave: true,
        columns: [
                        { data: "Title" },
                        { data: "Id" },
                        { data: "ListTitle" },
                        { data: "DueDateString" },
                        //{
                        //    data: {
                        //        _: "DueDateString",
                        //        sort: "DueDateFileTimeUTC"
                        //    }
                        //},
                        { data: "Status" },
                        { data: "Effort" },
                        { data: "WorkUnits" },
                        { data: "TotalWork" },
                        { data: "Id" }
        ],


        columnDefs: [
                {
                render: function (data, type, row) {
                        var rowHtml = "<button class='ladda-button btn btn-sm btn-primary btn-3-3 btn-edit' data-style='slide-up' onclick='LoadEditTaskWindow(\"" + row.Id + "\", \"" + row.ListId + "\");'><i class='fa fa-pencil' style='margin-right:5px;'></i> @Strings.ButtonEdit</button>";
                        return rowHtml;
                    },
                    targets: 8
                },
                {
                    render: function (data, type, row) {
                        var rowHtml = '<a href="@Url.Action("Tasks", "TaskBoard")?listId=' + row.ListId + '">' + row.ListTitle + '</a>';
                        return rowHtml;
                    },
                    targets: 1
                },
                {
                    render: function (data, type, row) {
                        var rowHtml = '';
                        if (row.IsNew) {
                            rowHtml = rowHtml + " <span class='label label-success'>@Strings.New</span>";
                        }

                        if (row.Stuck) {
                            rowHtml = rowHtml + " <span class='label label-warning'>@Strings.OnHold</span>";
                        }

                        if (row.IsOverdue) {
                            rowHtml = rowHtml + " <span class='label label-danger'>@Strings.OverDue</span>";
                        }

                        return rowHtml;
                    },
                    targets: 2
                }
        ]
    });
    $('#' + elementId).on('draw.dt', function () {
        stop_laddaButtons();
        init_laddaButtons();
    });
}

从版本1.3.xx更新后,排序停止工作。

我无法弄清楚,我的数据/配置存在什么问题,排序停止了工作。

是否有人遇到类似问题并找到解决方案?

这是我在JavaScript对象中看到的

enter image description here 这是Controller中的.Net对象 enter image description here

1 个答案:

答案 0 :(得分:2)

我认为模型活页夹可能没有注册 - 尝试添加:

if (!ModelBinders.Binders.ContainsKey(typeof (DataTablesParam)))
                ModelBinders.Binders.Add(typeof (DataTablesParam), new DataTablesModelBinder());

到启动代码(例如在global.asax / Application_Start中)