选择 Jquery 数据表中的所有行

Question

我有一个数据表，我可以在其中选择多行 onclick，但是如何在单击按钮时选择所有行，同时所有行都通过选择突出显示（您能否给出当前页面的选择示例和所有页面）。我已经编写了一个代码来获取多个选定的值。

复选框也可以，但是如何获取选定的值。

下面是单选和多选的代码。

 var oTable = $("#example").dataTable();

    $('#example tbody').on('click', 'tr', function() {
                        $(this).toggleClass('selected');

    });

在按钮提交时获取选定值的代码。

var row = oTable.rows('.selected').data();

var jsonArr = "[";

        if(row != null && row.length){

            for (var i = 0; i < row.length; i++) {
                var row1 = row[i]; // this will give me one row details
                        // row1[0] will give me column details
                        jsonArr = jsonArr + "{\"ID\":" + row1[0] + "},";

                }   
             jsonArr = jsonArr + "]";

Answer 1

TableTools extension 可能会对您有所帮助。有一个带有 select_all 和 select_none 按钮的 example，它们适用于所有页面。

一个默认限制是 select_all 将忽略当前过滤，但这很容易使用下面的代码解决。为 fnSelectAll 提供“true”参数可启用过滤器感知选择。

tableTools: {
    sRowSelect: 'multi',
    aButtons: [
        {
            sExtends: 'select_all',
            sButtonText: 'Select All',
            fnClick: function (nButton, oConfig, oFlash) {
                TableTools.fnGetInstance('example').fnSelectAll(true);
            }
        }
    ]
}

Answer 2

根据doc，有一个内置函数。无需额外编码，

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'T<"clear">lfrtip',
        tableTools: {
            "sRowSelect": "multi",
            "aButtons": [ "select_all", "select_none" ]
        }
    } );
} );

您将需要在 doc 中定义的 JS 文件，并且他们错过了包含以下相关 CSS 文件的 JS 文件

• http://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css

这就是全部。

Answer 3

感谢您的帮助。但是有些我是如何手动选择全部的，唯一的漏洞是，如果我选择标题复选框，所有行复选框都将被选中，但是当我们进入下一页时，例如：第 2 页标题复选框将被选中并且再次选择所有页面没有 2 行复选框我必须取消选中并选中标题复选框。

我做了什么：

我添加了输入类型 checbox thead tr 和 tbody tr 并为所有子输入提供了 class='case'。单击全选时调用函数以选择/取消选择子行

<thead>
     <tr>
       <th><input type='checkbox' id='selectall'/></th>
       <th>Patient Name</th>
     </tr>
</thead>

<tbody>
 <tr>
    <td class style='text-align: center;'><input type='checkbox' class='case' name='case'id = '"item.uid+"_I' /></td>
    <td>"+item.name+"</td>
  <tr>
</tbody>


// function to select/deselect all input checkbox

to check uncheck all input box
$('#selectall').click(function(event) {  //on click

    if(this.checked) { // check select status
          $('.case').each(function() { //loop through each checkbox
          this.checked = true;  //select all checkboxes with class "checkbox"   
          $(this).closest("tr").addClass("selected");              
     });
     }else{
           $('.case').each(function() { //loop through each checkbox
           this.checked = false; //deselect all checkboxes with class "checkbox"
           $(this).closest("tr").removeClass("selected");
     });        
    }
});


// select/deselect function if single row is selected
$('#patientdata tbody').on('click', 'tr', function() {
    var rowID = this.id;
    if ( $(this).hasClass('selected') ) {
      $(this).removeClass('selected');
        $('#'+rowID+"_I").attr('checked', false);
        }
        else {
              $(this).addClass('selected');
               $('#'+rowID+"_I").attr('checked', true);
            }
        });

谢谢