使用 Ajax 数据源时的数据表排序

Question

我是 Datatable 的新手，我正在尝试配置 Datatable，以便它使用 ajax 获取数据，将其显示为复选框、锚点和选项卡，并允许用户对其进行排序。 我有 ajax 和格式化部分，但是当我尝试对复选框进行排序时，它什么也不做。我查找了documented example 并从中获取了排序处理程序：

排序代码：

/* Create an array with the values of all the checkboxes in a column */
        $.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
            var aData = [];
            $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
                aData.push(this.checked == true ? "1" : "0");
            });
            return aData;
        }

创建复选框的代码：

    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": "sources/myData.json",
        "sAjaxDataProp": "items",
        "aoColumns": [
            {
                "mData": function (source, type, val) {
                    if (source.Published)
                        return '<input type="checkbox" checked="checked"/>';
                    else
                        return '<input type="checkbox" />';

                },
                //"sType": "dom-checkbox",
                "sSortDataType": "dom-checkbox"
                //, "bSortable": false
            },
            { "mData": "Author" },
            {
                "mData": function (source, type, val) {
                    return '<a href="' + source.Href + '">' + source.$name + '</a>';
                }
            }
        ]
    });

排序函数（$.fn.dataTableExt.afnSortData['dom-checkbox'] 被调用并返回数据，但表格没有更新。（代码有效，但不适用于 ajax 表格）。

数据样本：

{
    "items": [
        {
            "$name": "a",
            "Href": "http://google.com",
            "Author": "a",
            "Published": true
        },
        {
            "$name": "c",
            "Href": "http://www.whiskas.at/",
            "Author": "a",          
            "Published": false
        }
    ]
}

Answer 1

请注意，您编写的是标准 JavaScript，而不是 jQuery。如果 this 引用的是 jQuery 对象而不是 DOM 元素，则由于 jQuery 对象没有 checked 属性，所以 checked 将是未定义的。如果这是一个 jQuery 对象，您可以尝试以下一些示例：

this.prop("checked");

或

$(this).is(":checked")

在您当前的排序函数中将其替换为this.checked。这是一个例子：

//Create an array with the values of all the checkboxes in a column
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) {
  var aData = [];
  $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() {
    aData.push($(this).is(':checked') == true ? "1" : "0"); //New jQuery variable here
  });
  return aData;
}