javascript - 数据表过滤器不起作用

Question

为什么按名称列过滤不起作用？有人可以帮忙吗？

有一个带有 id="name" 的输入，它应该按表的名称列过滤值。但它不起作用。怎么了？

HTML:

        <div>
            <input type="text" id="name" name="name" placeholder="Name">
        </div>    
<table id="shTable" class="table table-striped table-bordered dataTable no-footer dtr-inline" role="grid" aria-describedby="shTable_info">
    <thead class="">
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

JavaScript:

<script>
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var max = parseInt( $('#max').val(), 10 );
            var name = $('#name').val();

            var age = parseFloat( data[3] ) || 0; // use data for the age column
            var name_table = (data[0]);

            if ( isNaN( max ) || ( age <= max ) || ( isNaN( max ) ) || ( age <= max ) || name_table.indexOf(name) > -1 )
            {
                return true;
            }
            return false;
        }
    );

    $(document).ready(function() {
        var table = $('#shTable').DataTable();

        // Event listener to the two range filtering inputs to redraw on input
        $('#max, #name').keyup( function() {
            table.draw();
        } );
    } );

</script>

Answer 1

它不会按名称过滤行，因为您混淆了直接从 datatables page 复制的代码.

这里，还涉及到另外一个领域。在您的情况下，您只需要按名称过滤(而不是像数据表页面中那样按年龄过滤)。所以你必须相应地调整过滤功能......

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var name = $('#name').val();


        var name_table = (data[0]);

        if (  name_table.indexOf(name) > -1 )
        {
            return true;
        }
        return false;
    }
);

实际操作 here