表格排序器和搜索

Question

我有一张大桌子，我想在上面添加搜索功能。我使用 tablesorter 对列进行排序，并使用教程在开头添加另一列以对行进行编号。但是搜索不起作用。这是我的代码：

HTML

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="/static/js/jquery.tablesorter.pager.js"></script>
<script src="/static/js/jquery.quicksearch.js" type="text/javascript"></script>
    <table id="myTable" class="table table-bordered tablesorter">
       <thead>

       </thead>
       <tbody>

       </tbody>
       <tfoot>
         <tr style="display:none;">
             <td colspan="5">
                 No rows match the filter...
             </td>
        </tr>       
       </tfoot>
    </table>
    <div id="pager" class="pager">
        <form>
             <img src="/static/blue/first.png" class="first"/>
             <img src="/static/blue/prev.png" class="prev"/>
             <input type="text" class="pagedisplay"/>
             <img src="/static/blue/next.png" class="next"/>
             <img src="/static/blue/last.png" class="last"/>
             <select class="pagesize">
             <option value="10">10 per page</option>
             <option value="20">20 per page</option>
             <option value="50">50 per page</option>
             </select>
       </form>
    </div>

这是我的 javascript：

<script>
$(document).ready(function() 
    {
    $.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr:visible", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(0).text(i + 1);
        });
    }
});


    $("table").tablesorter({widgets: ['numbering'],sortInitialOrder: 'desc', sortList: [[2,1]],headers: {0: {sorter: false}}})
    .tablesorterPager({container: $("#pager")});

    $("#myTable tbody tr").quicksearch({
            labelText: 'Search: ',
            attached: '#myTable',
            position: 'before',
            delay: 100,
            loaderText: 'Loading...',
            onAfter: function() {
                if ($("#myTable tbody tr:visible").length != 0) {
                    $("#myTable").trigger("update");
                    $("#myTable").trigger("appendCache");
                    $("#myTable tfoot tr").hide();
                }
                else {
                    $("#myTable tfoot tr").show();
                }
            }
        });

    }

</script>

我没有看到任何错误。只是没有搜索功能。

Answer 1

似乎快速搜索附加到#table，而不是#myTable，这是您共享的 HTML 中表格的 ID。

Answer 2

您可能想试试datatables.js/。它是一个 jQuery 插件，可以完成您尝试构建的工作，并且实现起来非常简单。

实现它的代码（默认有分页、搜索、列排序等）是这样的。

  $('#example').dataTable();