数据表过滤器不起作用

Question

Why filtering by name column doesn't work? Could somebody help with that?

There is an input with id="name" which should filter values by name column of the table. But it doesn't work. What is wrong?

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

It doesnt filter rows by name because you have mixed up the code you have copied directly from the datatables page .

There, another field is also involved. In your case you just have to filter only by name (and not by age as in the datatables page). So you have to adjust the filtering functionality accordingly...

$.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;
    }
);

See this in action here