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>

在jQuery DataTable中创建多个搜索栏

1 个答案: