javascript - 使用 jquery 数据表的单个复选框选择

Question

在 jquery 数据表中，应该选中单个复选框。

这link工作正常。

但上面的链接使用的是jquery.dataTables 1.10.16版本。我正在使用 jquery.dataTables 1.9.4 .

jquery.dataTables 是否可以实现上面示例中列出的相同功能 1.9.4而不是 jquery.dataTables 1.10.16 ？

Answer 1

在您提供链接的同一页面中，有很多关于使用“单一检查”选项的解释。

在列出的附件末尾，您可以看到引用的.js文件是

https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js

在您的页面中，您应该在 dataTable.js 之后添加此文件引用。

我认为，jquery 的版本并不重要。重要文件是“dataTables.select.js”!

其次，您必须像下面的示例一样更新您的 dataTable maker 代码；

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child' // this line is the most importan!
        },
        order: [[ 1, 'asc' ]]
    } );
} );

更新:

为什么不尝试编写自己的选择器函数？

例如；

$(document).ready(function() {
    $('#example').DataTable( {
            /// put your options here...
        } );

    $('#example').find("tr").click(function(){ CheckTheRow(this); });
} );

function CheckTheRow(tr){
    if($(tr).find("td:first").hasClass("selected")) return;

    // get the pagination row count
    var activePaginationSelected = $("#example_length").find("select").val();

    // show all rows
    $("#example_length").find("select").val(-1).trigger("change");

    // remove the previous selection mark
    $("#example").find("tr").each(function(i,a){
         $(a).find("td:first").removeClass("selected");
         $(a).find("td:first").html("");
     });

     // mark the picked row
     $(tr).find("td:first").addClass("selected");
     $(tr).find("td:first").html("<i class='fa fa-check'></i>");

     // re turn the pagination to first stuation
     $("#example_length").find("select")
                         .val(activePaginationSelected).trigger("change");

}