Add a JavaScript function for all rows in a Datatables grid

Question

 $(document).ready(function() { $('#example').DataTable(); }); function do_ok() { document.getElementById("a3").checked = true; } function do_error() { document.getElementById("a12").checked = true; }

 <html> <head> <!-- DataTables --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"> </head> <body> <table id="example" class="table table-bordered table-striped"> <thead> <tr> <th>Product</th> <th>Include</th> </tr> </thead> <tbody> <tr> <td>A01</td> <td><input type="checkbox" id="a1" value="4" /></td> </tr> <tr> <td>A02</td> <td><input type="checkbox" id="a2" value="25" /></td> </tr> <tr> <td>A03</td> <td><input type="checkbox" id="a3" value="100" /></td> </tr> <tr> <td>A04</td> <td><input type="checkbox" id="a4" value="99" /></td> </tr> <tr> <td>A05</td> <td><input type="checkbox" id="a5" value="88" /></td> </tr> <tr> <td>A06</td> <td><input type="checkbox" id="a6" value="38" /></td> </tr> <tr> <td>A07</td> <td><input type="checkbox" id="a7" value="57" /></td> </tr> <tr> <td>A08</td> <td><input type="checkbox" id="a8" value="46" /></td> </tr> <tr> <td>A09</td> <td><input type="checkbox" id="a9" value="42" /></td> </tr> <tr> <td>A10</td> <td><input type="checkbox" id="a10" value="28" /></td> </tr> <tr> <td>A11</td> <td><input type="checkbox" id="a11" value="43" /></td> </tr> <tr> <td>A12</td> <td><input type="checkbox" id="a12" value="125" /></td> </tr> </tbody> </table> <button onclick="do_ok()">Click Me(OK)</button> <button onclick="do_error()">Click Me(Row 12)</button> <!-- DataTables --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> </body> </html>

Unless I show above 25 rows per page, when I click button 'Click Me(Row 12)', a JavaScript error occurs since the table shows only 10 rows per page by default.

Any idea how to tick row 12's checkbox without editing maximum rows per page?

I have 5000+ rows in actual, I don't want show them all to make the JavaScript work.

Answer 1

This code can help, but you need to make it fit for your solution:

$(document).ready(function() {

  // Common function to update checkboxes
    function updateCheckBox(){

    // Use jQuery to set property so that
    // on not found element it fails silenty
    // and continue to next
    $("#a3").prop('checked',true);
    $("#a12").prop('checked',true)
  }

  // Initialize DataTable with event on 'draw' to
  // update checkboxes
  $('#example').DataTable().on('draw.dt', updateCheckBox);

  // Initial checkbox status
  updateCheckBox();

});

JsFiddle

Add a JavaScript function for all rows in a Datatables grid

Question

1 answers

solution1
0 ACCPTED 2017-07-19 19:10:17

Add a JavaScript function for all rows in a Datatables grid

Question

1 answers

solution1 0 ACCPTED 2017-07-19 19:10:17

solution1
0 ACCPTED 2017-07-19 19:10:17