$(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工作。
答案 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();
});