如何使用 jQuery 使用 column() 访问 dataTables 中的列？

Question

What I did inside my dataTable is I have two checkboxes that are separated from my column(0) and to column(6), My code is working for checkbox to check all of my elements but the problem is I can only specify column(0). How can I access the column(6) inside my dataTables with checkbox on it?

Here is my code example.

 $("#select_all").on('click', function() { $('#dataTables').DataTable().column(0)<<<<<<<<<<<<<<<<<<< this is my problem, it only specifies column(0).nodes().to$().find('input[type="checkbox"]:enabled:visible').prop('checked', this.checked); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> Emailed Data for approval </div> <.-- /?panel-heading --> <div class="panel-body"> <div class="table-responsive"> <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables"> <thead> <tr> <th> <center> Select Data <input type="checkbox" id="select_all"> </center> </th> <th> Control Number </th> <th> Tools Specification </th> <th> Supplier </th> <th> <center> Status </center> </th> <th> <center> Reason for transfer </center> </th> <th class="hide_me"> <center> #### <input name="chk_id[]" type="checkbox" class="subCheckbox" value="<;php echo $row['tools_req_id']??>"> </center> </th> </tr> </thead> <td> <center> <input name="chk_status[]" class="is_checked_status" type="checkbox" value="<;php echo $row['req_stats']??>"> </center> </td> <td> <center> <label data-id="<;php echo $row['ID']??>" class="statusButton <?php echo ($row['req_stats']): 'label-success'? 'label-danger'?>"> </label> </center> </td> <td> <center> <p> </p> </center> </td> </tbody> </table> </div> </div> </div> </div> </div>

Answer 1

You can use columns() instead of column() - and use an array selector to specify the indexes you want to select: [ 0, 6 ] .

(In fact, there is a variety of such selector options which can be used here, in addition to a basic index integer, and my array of index integers.)

Here is my version of your code:

$("#select_all").on('click', function() {
  var nodesObj = $('#dataTables').DataTable().columns( [ 0, 6 ] ).nodes().to$();
  var nodesArray = nodesObj[0].concat( nodesObj[1] );
  $(nodesArray).find('input[type="checkbox"]:enabled:visible').prop('checked', 'true');
});

In the above code, the columns( [ 0, 6 ] ) function returns an object containing 2 arrays - one for each selected column.

So then we have to merge those into a single array: nodesObj[0].concat( nodesObj[1] ) .

After that, we can apply our jQuery find to the resulting array of jQuery objects.