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

时间:2015-04-30 16:57:40

标签: jquery jquery-datatables

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

以下是我一直在使用的内容:(目前无法按预期工作。)

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

1 个答案:

答案 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