CODEWITHSUNDEEP
jqpagination
user3079977
user3079977

Reputation: 3

jqPagination requests for new page

I have a large db table that I want to show to users. I show the info in a table, about 30 rows per page. I want to use jqPagination to allow the users to jump to a different page. So page 1 will show rows 1-30, page 2 will show rows 31-60,... The only example I see are showing how to use it to jump to different section of a page. Is it possible to use jqPagination in a way to request the next 30 rows to a new page?

Thanks in advance!

Upvotes: 0

Views: 954

Answers (1)

Ben Everard
Ben Everard

Reputation: 13804

If you're displaying all table rows to begin with you could use the following code to only show 30 at a time:

$(document).ready(function() {

    // select the table rows
    $table_rows = $('.table-example tbody tr');

    var table_row_limit = 30;

    var page_table = function(page) {

        // calculate the offset and limit values
        var offset = (page - 1) * table_row_limit,
            limit = page * table_row_limit;

        // hide all table rows
        $table_rows.hide();

        // show only the n rows
        $table_rows.slice(offset, limit).show();

    }

    $('.pagination').jqPagination({
        max_page: $table_rows.length / table_row_limit,
        paged: page_table
    });

    // set the initial table state to page 1
    page_table(1);

});

Table pagination example.

If you don't display all rows to begin with, you could adapt this code to fetch the rows from your system using AJAX instead of showing / hiding.

Upvotes: 0

Related Questions