CODEWITHSUNDEEP
jqueryjquery-pluginspagination
Vadim Chernysh
Vadim Chernysh

Reputation: 143

Table pagination not work

I use two jQuery plugins: quickSearch and tablePagination

When I type text into the input box, pagination doesn't work :(

This is my code:

<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>

How can I do pagination if I type text into the search input?

Upvotes: 0

Views: 1291

Answers (1)

jitter
jitter

Reputation: 54615

Try this fixed version. Your main problem probably is that you didn't wrap your initialization code into the $(document).ready(function() { ... }); block. By not doing that you have multiple potential error sources. Code gets executed before quicksearch and or tablepagination are fully load and/or gets executed before the table itself is visible in the dom as it gets rendered after the 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>

Upvotes: 1

Related Questions