如何使用 DataTables 在一系列数字之间进行过滤并隐藏不在该范围内的行？

Question

我正在尝试通过两个输入字段进行输入。最小字段和最大字段。使用最小值和最大值，我想查看特定列并检查该列中单元格的值是否在范围之间。如果单元格不在最小值和最大值范围内，我想隐藏该行。

这是我一直在使用的东西：（目前没有按预期工作。）

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

Answer 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

Answer 2

一段时间后，我能够通过自定义过滤器获得所需的内容。这是我用的。

jQuery.fn.dataTableExt.afnFiltering.push(
    function (oSettings, aData, iDataIndex) {
        var min = +counterLow.val() || table.column(1).data().sort()[0],
            max = +counterHigh.val() || table.column(1).data().sort().reverse()[0],
            age = +aData[1];

        return !!(age >= min && age <= max) &&
               !(isNaN(min) || isNaN(max) || isNaN(age));
    }
);

Fiddle

如何使用 DataTables 在一系列数字之间进行过滤并隐藏不在该范围内的行？

How can I filter between a range of numbers and hide rows that aren't in the range using DataTables?

jquery

jquery-datatables