【问题标题】:MVC.JQuery.DataTables - sort not workingMVC.JQuery.DataTables - 排序不起作用
【发布时间】:2018-05-08 19:33:06
【问题描述】:

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

获取数据的控制器动作如下:

        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 对象中看到的

这是控制器中的 .Net 对象

【问题讨论】:

  • 嗨,我编写了 Mvc.JQuery.DataTables .NET 代码。我对您要达到的目标感到有些困惑。您是否尝试仅在服务器端进行排序?即客户端不控制它?
  • 嗨,我想做客户端排序。我已经在我的项目中从版本 1.3.56 更新到 1.5.36。更新后,客户端排序不再起作用。我已经尝试了很多方法让它再次工作,但我找不到任何原因,为什么排序停止工作。我再次降级后,它像以前一样工作。当我单击表中的列标题时,使用 1.5.36 根本没有任何反应。奇怪的是,服务器端与客户端有什么关系......你能重现这个问题还是它只是发生在我的项目中。
  • 您可以使用 Fiddler 捕获发布的数据吗?查看过滤器选项是否正确传递。
  • 确保 Datatables 版本与示例站点上的版本相匹配 - 您可以看到所有功能都在那里工作aspdatatables.azurewebsites.net
  • 您好,感谢您的提示,我会尽快尝试并告诉您结果。

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


【解决方案1】:

我认为模型绑定器可能未注册 - 尝试添加以下内容:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-02-09
    • 2013-04-07
    • 2015-05-19
    • 2012-09-20
    • 2015-06-23
    • 1970-01-01
    • 2023-03-10
    相关资源
    最近更新 更多