在Jquery Datatables中选择所有行

Question

我有一个datatables，我可以在单击时选择多个行，但是如何在按钮单击时选择所有行，并同时突出显示所选行（您能否给出当前页面和所有页面的选择示例）。 我已编写了获取多个选定值的代码。

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

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

 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 + "]";

- pise

---

嗨，我真的很想知道出了什么问题，以至于我得到了负投票。 “你能请举一个当前页面和所有页面的选择例子吗？”这是因为这个原因吗？但是我在谷歌上搜索并没有像“全选”一样的点击，所以我请求一些例子。我得到的都是输入复选框全选。 - pise

Answer 1

我想可能会对你有帮助的是TableTools扩展。这里有一个带有select_all和select_none按钮的示例，并且它们适用于所有页面。

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

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

- Yuri

---

我已经手动解决了我的问题。但我一定会尝试您的解决方案，并在发布我的代码时再次发帖。 - pise

我也尝试了下面的方法，但很快就证明它不可扩展。问题在于当你执行$('.case')时，你只选择了datatables创建的复选框，通常只有第一页。如果你只是浏览所有页面，然后按下标题复选框，那么它才会实际选择所有页面上的内容。 - Yuri

@pise，除了我上面提到的，我放弃了为此创建手动解决方案。使用TableTools要简单得多。但是如果数据量相对较小，则复选框的JavaScript处理也可以起作用。 - Yuri

表格工具似乎已经被弃用了。现在需要同时使用按钮和选择扩展。 - Orkun

Answer 2

根据文档，这个已经有内置函数了。不需要额外编码。

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

您需要在文档中定义的JS文件，除此之外，他们还错过了包含以下相关CSS文件

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

这就是所需的全部。

- Ruwantha

Answer 3

感谢您的帮助。但是我手动选择了所有内容，唯一的漏洞是，如果我选择标题复选框，则将选择所有行复选框，但当我们进入下一页（例如：第2页）时，标题复选框将被选中，再次选择所有第2页行复选框时，我必须取消选中并重新选中标题复选框。

我的做法：

我已经在thead tr和tbody tr中添加了input type checbox，并为所有子输入框赋予了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);
            }
        });

谢谢

- pise

---

它会在下一页继续选择吗？ - saleem ahmed