Question

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

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

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

 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可能对您有所帮助。有example的select_all和select_none按钮，这些按钮适用于所有页面。

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

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和aprt中定义的JS文件，因为他们错过了包含以下相关CSS文件

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

这就是全部。

Answer 3

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

我做了什么：

我添加了输入类型checbox thead tr和tbody tr并且给了class =＆＃39; case＆＃39;对所有孩子的投入。单击选择全部调用函数以选择/取消选择子行

<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);
            }
        });

由于

选择Jquery Datatables中的所有行

3 个答案: