从JQuery数据表中删除特定的行 [英] Delete specific rows from a JQuery Datatable
问题描述
在我的JSP页面上的不同选项卡上，我有三个JQuery DataTables，我想要显示几乎相同的表，并稍加修改.第一个标签上的表格如下:
I have three JQuery DataTables in my JSP page on different tabs where I want to display almost the same table, with a slight modification. The table on the first tab goes as:
<table id="firstTable">
<tbody>
<c:forEach items="${A_List}" varStatus="status" var="alist">
<tr role="row" id="colorRow" data-user="${alist.D}">
<td>${alist.A}</td>
<td>${alist.B}</td
<td>${alist.C}</td>
<td>${alist.D}</td>
</tr>
</c:forEach>
</tbody>
</table>
现在，第二个标签上的第二个表:
Now, the second table on the second tab:
<table id="secondTable">
<tbody>
<c:forEach items="${A_List}" varStatus="status" var="alist">
<tr role="row" id="colorRow" data-user="${alist.D}">
<td>${alist.A}</td>
<td>${alist.B}</td
<td>${alist.C}</td>
<td>${alist.D}</td>
</tr>
</c:forEach>
</tbody>
</table>
第三个表格如下:
<table id="thirdTable">
<tbody>
<c:forEach items="${A_List}" varStatus="status" var="alist">
<tr role="row" id="colorRow" data-user="${alist.D}">
<td>${alist.A}</td>
<td>${alist.B}</td
<td>${alist.C}</td>
<td>${alist.D}</td>
</tr>
</c:forEach>
</tbody>
</table>
现在，在第一张桌子上，我想显示所有内容.在第二个表上，我只想在最后一列中显示其值为是"的行，而在第三个表中，最后一个列中将显示其值为否"的所有行.此外，有些行既没有是"也没有否".它们可以完全忽略.为此，我尝试将其实现为:
Now, on the first table, I want to display everything. On the second table, I want to display only the rows which have "Yes" as their value in the last column and the third table displays all the rows which have "No" as their value in the last column. Additionally, there are rows which neither have a "Yes" or a "No". They can be completely ignored. For this, I tried to implement it as:
$(function(){
var firstTable = $('#firstTable').DataTable();
var secondTable = $('#secondTable').DataTable();
var thirdTable = $('#thirdTable').DataTable();
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(firstTable.row(dataIndex).node()).attr('data-user') == 'YES';
});
secondTable.draw();
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
return $(secondTable.row(dataIndex).node()).attr('data-user') == 'NO';
});
thirdTable.draw();
});
但是，这并不符合预期.确实出现了第二个选项卡，但是当我尝试使用搜索选项卡过滤掉所有内容时，第一个和第二个表都被弄乱了.
我也尝试了fnDeleteRow.也没用.预先感谢！
However, this gives doesn't do as intended. The second tab does appear, but when I try to filter out anything using the search tab, the first and the second, both tables are messed up.
I also tried fnDeleteRow. Didn't work either. Thanks in advance!
推荐答案
您需要确保已拥有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).
这篇关于从JQuery数据表中删除特定的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
