Sekhar Babu
Sekhar Babu

Reputation: 368

How to limit the page numbers displayed in the table footer in footable

How to limit the page numbers displayed in the table footer, if i had 1000 rows and and data-page-size is 10 then it giving many page numbers in the footer. so is there any data-attribute there to mention only show some page numbers something like this format

< << 1 2 3 >> >

Upvotes: 3

Views: 8471

Answers (3)

barrypicker
barrypicker

Reputation: 10108

FooTable v3 specific...

Assuming the table definition is as..

<table id="myTable" class="footable" data-paging="true" data-paging-size="5" data-paging-limit="10">

and JavaScript (remember to include reference to FooTable JavaScript libraries)...

$(document).ready(function () {
    $(".footable").footable();
});

.. this will limit the pagination to show only 10 page links.

When using FooTable v3 the visibility (and limit of visibility) of pagination links is controlled via CSS. If electing to NOT use the CSS provided by FooTable, be sure to evaluate the following CSS rules for visibility of the page links...

li.footable-page {
    display: none;
}

li.footable-page.visible {
    display: inline;
}

The policy is to hide all numbered pagination links, then only show those marked with a CSS class 'visible'. The JavaScript will add the CSS classes to the <li> items as necessary.

Upvotes: 1

Ahmad Seraj Eddin
Ahmad Seraj Eddin

Reputation: 171

in footable 2 you can simply add [data-limit-navigation] to table data-attribute

<table data-limit-navigation="5"> </table>

Upvotes: 12

Sekhar Babu
Sekhar Babu

Reputation: 368

I finally figured this,

we can limit the page numbers displayed in the footer by specifying the data attribute page-navigation-size, or else you can override or mention it in footable.paginate.js file , here in this you will find the following

    var defaults = {
    paginate: true,
    pageSize: 10,
    pageNavigation: '.footable-nav',
    pageNavigationSize: 0 // mention the number how many page numbers you want to display.
};

Upvotes: 2

Related Questions