选择Jquery Datatables中的所有行

I have a datatables in which I can select multiple row onclick but how can I select all the row on a click of button and at the same time all rows are highlighted with selection (Can you please give example of selection for current page and all the pages). I have written a code to get multiple selected value.

我有一个数据表，我可以在其中选择多行onclick但是如何在点击按钮上选择所有行，同时所有行都用选择突出显示（你能否举例说明当前页面的选择和所有页）。我编写了一个代码来获取多个选定值。

Checkbox will also do but then how to get selected value.

Checkbox也会这样做但是如何获得选定的值。

Below is code for single and multiple selection.

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

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

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

    });

Code to get selected value on button submit.

用于在按钮提交时获取所选值的代码。

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

3 个解决方案

#1

What will probably help you is TableTools extension. There is an example with select_all and select_none buttons, and those work for all pages.

TableTools扩展可能对您有所帮助。有一个使用select_all和select_none按钮的示例，这些按钮适用于所有页面。

One default limitation is that select_all will ignore current filtering, but that is easy to solve using the code below. Providing "true" argument to fnSelectAll enables the filter-aware selection.

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

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

#2

According to the doc there is a inbuilt function for this. No need extra coding,

根据该文档，有一个内置的功能。无需额外编码，

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

You will need the JS file defined at the doc and aprt from that they have missed to included the following related CSS file

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

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

This is all it takes.

这就是全部。

#3

-1

Thank You for your help. But some how I did my select all manually the only loop hole in this is, if I select header check box all the row check box will be selected but when we go on next page eg: page no 2 header check box will be checked and again to select all page no 2 rows check box I have to uncheck and check header checkbox.

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

What I did:

我做了什么：

I have added input type checbox thead tr and tbody tr and gave class ='case' to all child input. On click of select all calling a function to select/deselect child rows

我添加了输入类型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);
            }
        });

Thanks

谢谢

#1