为Datatables网格中的所有行添加JavaScript函数

时间:2017-07-19 18:43:00

标签: javascript datatable

$(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>

除非我每页显示25行以上,否则当我点击“Click Me(第12行)”按钮时,会出现JavaScript错误,因为默认情况下表格每页只显示10行。

知道如何在不编辑每页最大行数的情况下勾选第12行的复选框吗?

我实际上有5000多行,我不想全部展示它们以使JavaScript工作。

1 个答案:

答案 0 :(得分:0)

此代码可以提供帮助,但您需要使其适合您的解决方案:

$(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