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

Question

在jquery数据表中,应选中单个复选框.

这个链接工作正常.

但上面的链接是使用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 制作者代码，如下例所示；

$(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");

}