How to access column in dataTables by using column() using jQuery?

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *