使用 jQuery 在 DataTables 中进行复选框排序答案

【问题标题】：Checkbox sort in DataTables using jQuery使用 jQuery 在 DataTables 中进行复选框排序
【发布时间】：2013-03-27 06:15:00
【问题描述】：

我一直在尝试对DataTables jQuery 插件中的复选框字段进行排序以选中和取消选中。

我正在像这样在表格中创建输入（复选框）：

'<input type="checkbox" '+ check +' />'

check 包含文本“checked”或“”。

到目前为止，我只尝试添加 DOM 复选框类型的排序，如下所示：

{ "sSortDataType": "dom-checkbox" }

当我使用插件API documentation 中的整个代码时，我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“afnSortData” 在我的控制台内。

问题：按下列标题不会按选中或未选中复选框对列进行排序。

我想就如何修复上述错误或仅使用 jQuery 和插件的方法进行排序获得建议。

谢谢。

编辑

刚刚尝试使用固定代码 - 没有错误。但是排序搞砸了：它只是相互替换而不是排序。例如：如果我选中了 1 个复选框而没有选中 9 个，则选中的复选框将从第三位切换到第六位，然后再切换到第三位，依此类推。

【问题讨论】：

见这里：stackoverflow.com/questions/13206894/…
这里没有提到复选框排序。
它向您展示了如何对任何类型的输入进行排序...您只需要引用正确的属性，例如 (input).checked 属性。
喜欢 "sSortDataType": "dom-(input).checked" 吗？因为它不适合我
回到我提供的链接...我评论中的（输入）只是一个地标...在我提供的链接中，他们对不同的输入类型进行排序... jusr use该示例，带有复选框属性...

标签： jquery sorting checkbox datatable

【解决方案1】：

我所做的是在隐藏的 P 中创建一个 bool var，因此它将与复选框在同一个位置。然后我禁用了复选框中更改值的选项，并且排序现在正在工作。

【讨论】：

我有类似的情况，我的问题是，当我对复选框进行排序时，控件不会转到为其定义的函数，我定义了一个名为 dom-checkbox 的函数，sSortDataType 是dom-checkbox，你能帮忙吗？
请您提供代码sn-p，因为我也面临同样的问题
@SachinGaikwad <td><input type='checkbox' class='minimal' "+product_enabled+"><p style='visibility: hidden; display: none;'>"+products[i].enabled+"</p></td>

【解决方案2】：

我不得不稍微调整Moby's Stunt Double 提供的答案。无需额外的排序插件！只是一点点自定义编码。

感谢大家的所有想法！出于某种原因，我不得不对我的桌子进行特殊处理，这不是一般的解决方案。这对我来说很好。

我的复选框被禁用并以编程方式检查，因此我无法调用.checked。基于 iColumn 的调用也把事情搞砸了。可能是因为我有一个隐藏的第 0 列。

这对我有用：

$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn ) {
    var aData = [];
    $(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
        var checker = $(this).find('.classOnSurroundingSpan input');
        aData.push( checker.prop("checked")==true ? "1" : "0" );
    } );
    return aData;
}

我的标记看起来像这样（周围的跨度是启用跟踪a click on a disabled checkbox 的解决方案的一部分）：

<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>

我的表定义是（部分）：

"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]

【讨论】：

【解决方案3】：

找到这个例子：

$.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;
}

像这样初始化：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "sSortDataType": "dom-checkbox" }
        ]
    } );
} );

这里：http://www.datatables.net/examples/plug-ins/dom_sort.html

【讨论】：

我写了这个例子有一个错误，我写了它是什么类型的错误。
你的标题是否有一个thead标签和th标签？我曾经遇到过 DataTables 和标记不佳的表格的问题。
tad 标签内的第一个标签 @Moby's Stunt Double

【解决方案4】：

这个解决方案对我有用，所以我写了一篇关于它的博客文章。

http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables

【讨论】：

【解决方案5】：

这对我有用：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );

【讨论】：

【解决方案6】：

找到这个例子：

  $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        return $('input', td)[1].checked ? '1' : '0';
    });
}

像这样初始化：

$(document).ready(function() {
    $('#example').dataTable( {
        "columnDefs": [
                        {
            "targets": 10,
                            "orderDataType": "dom-checkbox"
                        });
} );

【讨论】：

【解决方案7】：

这对我有用

$(document).ready(function () {
    $('#Table').DataTable({
        "language": datatableLanguaje,
        "aoColumnDefs": [ 
            { "aTargets": [8], "orderDataType": "dom-text", type:'string' },
        ]
    });
});

【讨论】：

【解决方案8】：

如果你在复选框元素上有某种唯一标识符，你可以像下面这个例子那样做一些非常干净的事情（注意这是一个数据表sorting plugin 语法）

如果您的输入如下所示：

<input data-app-id="1" class="migrateCheck" type="checkbox">

插件看起来像：

function checkboxCompare(a, b) {
    var aId = $(a).data('app-id'),
        bId = $(b).data('app-id'),
        aChecked = $('.migrateCheck[data-app-id=' + aId + ']:checked').length,
        bChecked = $('.migrateCheck[data-app-id=' + bId + ']:checked').length;

    if (aChecked && !bChecked) return -1;
    else if (!aChecked && bChecked) return 1;

    return 0;
}

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
    "checkbox-pre": function (a) {
        return a;
    },

    "checkbox-asc": function (a, b) {
        return checkboxCompare(a, b);
    },

    "checkbox-desc": function (a, b) {
        return checkboxCompare(b, a);
    }
});

然后只需在 aoColumnDefs attr 上为包含复选框的 col 指定 sType: "checkbox"。

【讨论】：

【解决方案9】：

任何东西都可以通过一些简单的 html 进行排序。

$('#table input[type=checkbox]').each(function () {
    var text = $(this).prop('checked');
    var ele = $('<span>' + text + '</span>').hide();
    $(this).after(ele);
});

【讨论】：

【解决方案10】：

这让我有点难过。

我使用的是标准插件代码https://datatables.net/plug-ins/sorting/custom-data-source/dom-checkbox：

$.fn.dataTable.ext.order['dom-checkbox'] = function  ( settings, col )
{
    return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
        return $('input', td).prop('checked') ? '1' : '0';
    } );
};

您需要指定“dom-checkbox”列类型是可排序的：

$('#myTable').dataTable({
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ "action" ] },
        { "sSortDataType": "dom-checkbox", "aTargets": [ "enabled" ] }
    ],
    "aaSorting": [
        [ 3, "desc" ]
    ]
});

在视图中，我启用 CheckBox 列以将复选框放入（不绑定到列号）：

<th class="enabled">Enabled</th>

【讨论】：