Limit number of page tabs with Bootstrap Pagination

Limit number of page tabs with Bootstrap Pagination

cfdudecfdude Posts: 4Questions: 0Answers: 0
edited April 2014 in DataTables
I've been using DataTables with Editor / TableTools in a current project and it's also using BootStrap styling. One thing I noticed was that I could not control the number of page tabs being displayed when using the BootStrap style.

The only fix I found was to modify the BootStrap Pagination plugin, found here https://datatables.net/plug-ins/pagination , in the fnUpdate function I added one more 'if' before the for loop:

[code]
if (jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPage < iEnd){
iEnd = jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPage;
}
[/code]

Doing this allowed me to set the number of page tabs I wanted similar to the full text number method. This is what i use on the calling page that initializes the DataTable.

[code]
jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPage=3;
[/code]

I hope this helps someone else.

Replies

  • cfdudecfdude Posts: 4Questions: 0Answers: 0
    Grr.. submitted too soon. That does limit the number of tabs, but doesn't fix proper pagination - i.e. if you set 3 tabs [1] [2] [3] you could still need more tabs for additional pages. I think I might invest at looking at http://bootstrappaginator.org/ to fix this issue.
  • cfdudecfdude Posts: 4Questions: 0Answers: 0
    On closer look at the BootStrap pagination plug-in, if I adjust the first line under "fnUpdate" function to this it works:

    [code]
    var iListLength = ( jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPage < 5 ? jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPage : 5 );
    [/code]
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Good question! You are right in that at the moment the only way to modify the Bootstrap paging display is by altering its code.

    The good news is that in DataTables 1.10 I've added an abstraction layer to the pagination controls, so the logic for calculating what buttons are shown, and how those buttons are actually displayed is separated into two parts. The upshot is that the Bootstrap integration just needs to provide a renderer for the buttons and the logic for what buttons are shown is retained internally. The `$.fn.dataTable.ext.pager.numbers_length` property is used to control the button of paging buttons shown in 1.10 (default 7).

    Allan
This discussion has been closed.