我正在尝试通过两个输入字段输入。最小字段和最大字段。使用最小值和最大值,我想查看某个列并检查该列中单元格的值是否在该范围之间。如果单元格不在最小值和最大值的范围内,我想隐藏该行。
以下是我一直在使用的内容:(目前无法按预期工作。)
$('table').DataTable();
var counterLow = $('#counter-low'),
counterHigh = $('#counter-high');
function filterAge() {
table.columns(1).every(function () {
var min = +counterLow.val(),
max = +counterHigh.val();
this.data().each(function (data, index) {
if (data > min && data < max) {
table.row(index).child.show();
} else {
table.row(index).child.hide();
}
});
});
}
counterLow.on('keyup', filterAge);
counterHigh.on('keyup', filterAge);
table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
input {
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<input id="counter-low" type="text" placeholder="Minimum age" />
<input id="counter-high" type="text" placeholder="Maximum age" />
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jon</td>
<td>64</td>
</tr>
<tr>
<td>Bill</td>
<td>86</td>
</tr>
<tr>
<td>Joel</td>
<td>12</td>
</tr>
<tr>
<td>Fred</td>
<td>35</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
试试这个 的 *更新强>
var table = $('table').DataTable();
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
return parseInt(data[1]) >= parseInt($('#counter-low').val() || data[1])
&& parseInt(data[1]) <= parseInt($('#counter-high').val() || data[1])
});
$('#counter-low, #counter-high').on('keyup', table.draw);
<强> JSFiddle 强>