数据表过滤器不起作用

时间:2017-10-30 15:01:50

标签: javascript jquery datatables

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

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>

1 个答案:

答案 0 :(得分: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

中查看此内容