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

问题描述

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

I'm trying to take input through two input fields. A minimum field and a maximum field. With the minimum and maximum values I want to look at a certain column and check to see if the value of the cell in that column is between the range. If the cell is not in the range of the minimum and maximum values, I would like to hide the row.

以下是我一直在使用的工具:(当前未按预期工作.)

Here's is what I've been working with: (Currently not working as intended.)

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

推荐答案

尝试这个 *已更新

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

JSFiddle

这篇关于如何使用DataTables在数字范围之间进行过滤并隐藏不在该范围内的行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！