更新时间:2023-02-02 21:35:51
您需要确保已拥有thead
:
<div id="first">
<table id="firstTable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Yes/No</th>
</tr>
</thead>
<tbody>
<tr role="row" data-user="Yes">
<td>1 One</td>
<td>1 Two</td>
<td>1 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>2 One</td>
<td>2 Two</td>
<td>2 Three</td>
<td>No</td>
</tr>
<tr>
<td>3 One</td>
<td>3 Two</td>
<td>3 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>5 One</td>
<td>5 Two</td>
<td>5 Three</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
<div id="second">
<table id="secondTable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Yes/No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 One</td>
<td>1 Two</td>
<td>1 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>2 One</td>
<td>2 Two</td>
<td>2 Three</td>
<td>No</td>
</tr>
<tr>
<td>3 One</td>
<td>3 Two</td>
<td>3 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>5 One</td>
<td>5 Two</td>
<td>5 Three</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
<div id="third">
<table id="thirdTable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Yes/No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 One</td>
<td>1 Two</td>
<td>1 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>2 One</td>
<td>2 Two</td>
<td>2 Three</td>
<td>No</td>
</tr>
<tr>
<td>3 One</td>
<td>3 Two</td>
<td>3 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>4 One</td>
<td>4 Two</td>
<td>4 Three</td>
<td>Yes</td>
</tr>
<tr>
<td>5 One</td>
<td>5 Two</td>
<td>5 Three</td>
<td>No</td>
</tr>
</tbody>
</table>
</div>
这将停止DataTables的抱怨,然后可以这样创建DataTables:
Which will stop DataTables complaining, then your DataTables can be created like this:
$(function() {
var firstTable = $('#firstTable').DataTable();
var secondTable = $('#secondTable').DataTable({
"initComplete": function(settings) {
var api = this.api();
api.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
if (data && data[3] !== "Yes") {
api.rows(rowIdx).nodes().to$().addClass('remove');
}
});
api.rows('.remove').remove().draw();
}
});
var thirdTable = $('#thirdTable').DataTable({
"initComplete": function(settings) {
var api = this.api();
api.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
if (data && data[3] !== "No") {
api.rows(rowIdx).nodes().to$().addClass('remove');
}
});
api.rows('.remove').remove().draw();
}
});
});
在 JSFiddle此处工作.希望能有所帮助(TBH可能有更好的方法-也许其他人会加入进来,因为这确实很受黑客欢迎-值得一看的东西总是有帮助的……JSFiddle是您的朋友).
Working JSFiddle here. Hope that helps (there are probably better ways of doing it TBH - perhaps someone else will chip in as this is quite hackie - it always helps to have something to look at... JSFiddle is your friend).