сделать панель множественного поиска в jQuery DataTable

Question

Я пытался создать таблицы данных с какой-то строкой поиска, на самом деле мне нужно 3 панели поиска для поиска в каждом отдельном столбце.

Я пробовал этот код из https://datatables.net/examples/plug-ins/range_filtering.html

но панель поиска не может работать вообще, и с этим кодом первое представление при загрузке страницы пустое, затем при заполнении панели поиска отображается значение и таблица.даже если таблица отображается, она не соответствует строке поиска

   <script>
        $.fn.dataTable.ext.search.push(
            function( settings, data, dataIndex ) {
                // name, tier, segment is my element search bar
                var name = $('#name').val().toLowerCase();
                var tier = $('#tier').val().toLowerCase();
                var segment = $('#segment').val().toLowerCase();

                if((data[1].toLowerCase().indexOf(name)) || (data[2].toLowerCase().indexOf(tier)) || (data[6].toLowerCase().indexOf(segment)))
                { return true; }
                return false;
            }
        );

        $(document).ready(function() {
            var table = $('#data-table').DataTable();
            $('#name, #tier, #segment').keyup( function() {
                table.draw();
            } );
        } );
</script>

Answer 1

Может быть, это поможет вам, я использовал этот метод для своих сайтов, он работает как шарм

var table = $('#datatable').DataTable({
    "bSortCellsTop": true,
    responsive: true,
    "iDisplayLength": 25,
    "order": [
        [0, "desc"]
    ]
});

$('input.search').on('keyup change', function () {
    var rel = $(this).attr("rel");
    table.columns(rel).search(this.value).draw();
});

<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>

<table id="datatable">
    <thead>
        <tr>
            <th>Customer Lastname</th>
            <th>Customer Firstname</th>
            <th>Customer Age</th>
        </tr>
        <tr>
            <td><input rel="0" type="text" class="search" name="one"></td>
            <td><input rel="1" type="text" class="search" name="two"></td>
            <td><input rel="2" type="text" class="search" name="three"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Xavier</td>
            <td>Bigsby</td>
            <td>41</td>
        </tr>
        <tr>
            <td>Pierre</td>
            <td>Laroche</td>
            <td>38</td>
        </tr>
        <tr>
            <td>Xavier</td>
            <td>Bigsby</td>
            <td>41</td>
        </tr>
        <tr>
            <td>Pierre</td>
            <td>Laroche</td>
            <td>38</td>
        </tr>
        <tr>
            <td>Xavier</td>
            <td>Bigsby</td>
            <td>41</td>
        </tr>
        <tr>
            <td>Pierre</td>
            <td>Laroche</td>
            <td>38</td>
        </tr>
    </tbody>
</table>