Question

我使用了两个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>

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

Answer 1

试试这个固定版本。您的主要问题可能是您没有将初始化代码包装到$(document).ready(function() { ... });块中。如果不这样做，您就会有多个潜在的错误来源。代码在quicksearch和/或tablepagination完全加载之前执行和/或在表本身在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>

表格分页不起作用

1 个答案: