表格分页不起作用答案

【问题标题】：Table pagination not work表格分页不起作用
【发布时间】：2012-04-07 04:35:32
【问题描述】：

我使用了两个 jQuery 插件：quickSearch 和 tablePagination

当我在输入框中输入文本时，分页不起作用:(

这是我的代码：

<html><head>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.quicksearch.pack.js"></script>
    <script type="text/javascript" src="/js/jquery.tablePagination.js"></script>
    <script>
        var options = {rowsPerPage : 2,}

        $('#admin_table').tablePagination(options);

        $('table#admin_table tbody tr').quicksearch({
            position: 'before',
            attached: '#admin_table',
            labelText: 'Search'
        });
    </script>
</head>
<body>
    <table id="admin_table" class="admin_table">
    <tbody>
        <tr><td>test</td><td>test11</td></tr>
        <tr><td>te</td><td>tt11</td></tr>
        <tr><td>te4t</td><td>tes211</td></tr>
        <tr><td>tes45t</td><td>te234st11</td></tr>
        <tr><td>te67st</td><td>te123st11</td></tr>
</body>
</html>

如果我在搜索输入中输入文本，如何进行分页？

【问题讨论】：

顺便说一句。您缺少脚本标签之一的 type 属性。在var options = {...} 之后，您应该添加一个分号。你错过了结束 </tbody> 和 </table> 标签

标签： jquery jquery-plugins pagination

【解决方案1】：

试试这个固定版本。您的主要问题可能是您没有将初始化代码包装到 $(document).ready(function() { ... }); 块中。如果不这样做，您就会有多个潜在的错误来源。代码在快速搜索和/或表格分页完全加载之前执行和/或在表格本身在 dom 中可见之前执行，因为它在 javascript 之后呈现

<html><head>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.quicksearch.pack.js"></script>
    <script type="text/javascript" src="/js/jquery.tablePagination.js"></script>
    <script type="text/javascript">
        var options = {rowsPerPage : 2,};
        $(document).ready(function() {
            $('table#admin_table').tablePagination(options);

            $('table#admin_table > tbody > tr').quicksearch({
                position: 'before',
                attached: '#admin_table',
                labelText: 'Search'
            });
        });
    </script>
</head>
<body>
    <table id="admin_table" class="admin_table">
    <tbody>
        <tr><td>test</td><td>test11</td></tr>
        <tr><td>te</td><td>tt11</td></tr>
        <tr><td>te4t</td><td>tes211</td></tr>
        <tr><td>tes45t</td><td>te234st11</td></tr>
        <tr><td>te67st</td><td>te123st11</td></tr>
    </tbody>
    </table>
</body>
</html>

【讨论】：