8

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

我在表中创建输入（复选框），如下所示：

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

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

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

{ "sSortDataType": "dom-checkbox" }

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

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


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

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

谢谢。

编辑

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

4

10 回答 10

10

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

于 2013-04-13T07:54:13.190 回答
4

我不得不稍微调整提供的答案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;
}

我的标记看起来像这样（周围的跨度是启用跟踪禁用复选框单击的解决方案的一部分）：

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

我的表定义是（部分）：

"aoColumnDefs": [
    {"sSortDataType": "dom-checkbox",
    "aTargets":[1],
    "asSorting": ["desc"]}
]
于 2015-05-21T13:12:12.073 回答
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

于 2013-04-04T23:47:00.363 回答
3

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

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

于 2014-11-05T02:13:04.593 回答
2

这对我有用：

$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [
            null,
            null,
            null,
            null,
            null,
            { "orderDataType": "dom-text", type: 'string' },
        ]
    } );
} );
于 2016-02-01T18:52:42.880 回答
2

找到了这个例子：

  $.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"
                        });
} );
于 2017-08-01T05:27:19.303 回答
2

这对我有用

$(document).ready(function () {
    $('#Table').DataTable({
        "language": datatableLanguaje,
        "aoColumnDefs": [ 
            { "aTargets": [8], "orderDataType": "dom-text", type:'string' },
        ]
    });
});
于 2018-01-12T20:33:15.320 回答
0

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

如果您的输入如下所示：

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

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

于 2014-09-15T18:54:14.823 回答
0

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

$('#table input[type=checkbox]').each(function () {
    var text = $(this).prop('checked');
    var ele = $('<span>' + text + '</span>').hide();
    $(this).after(ele);
});
于 2018-09-27T14:58:37.037 回答
0

这让我有点难过。

我使用了标准插件代码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 列以将复选框放入（不绑定到 col 编号）：

<th class="enabled">Enabled</th>
于 2019-03-18T02:10:05.060 回答