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

Question

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

http://fooplugins.com/footable/demos/paging.htm#docs This is document link. Maybe it can help you. — barış çıracı, Sep 05 '16 at 07:36

score 12 · Answer 1 · answered May 19 '14 at 23:35

12

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

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

answered May 19 '14 at 23:35

Ahmad Seraj

171
1
8

1

I wrote this answer, but result like this < < 1 2 3 ... > > . Last page number not visible. I need this < < 1 2 3 ... 10 > > . – barış çıracı Sep 05 '16 at 07:29

score 2 · Answer 2 · answered Nov 23 '13 at 16:10

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.
};

barrypicker · Answer 3 · 2017-08-23T17:49:39.640

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.

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

3 Answers3

FooTable v3 specific...

Linked