MVC.JQuery.DataTables - sort not working

Question

I am using MVC.JQuery.DataTables Version 1.5.36 in one of my Projects. I am using the Ajax option to query data from the serverside.

The Controller action to retrieve the data is the following:

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

The Configuration of the datatable on the client side in JavaScript is this:

  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();
    });
}

After I updated from Version 1.3.xx, sorting stopped working.

I can't figure out, what the problem is in my data / configuration, that sorting stopped working.

Has anybody had a similar problem and found a solution?

This is what I see in the JavaScript Object

And this is the .Net Object in the Controller

Answer 1

I think the model binder may not be registered - try adding this:

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

to the startup code (e.g. in global.asax/Application_Start )