Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

datatables bootstrap pagination - only show previous / next

Been integrating the jquery DataTables plugin to my rails app, via the rweng/jquery-datatables-rails gem. It's awesome. I even went so far as to style it with bootstrap.

So, I have bootstrap, and kaminari for pagination (not sure if that matters). There is a kaminari-bootstrap gem as well.

Anyway, the DataTables table shows previous 1 2 3 4 5 next, and it's just chunky. How can I lose the numbers, and just have previoius next?

currently calling datatable with:

jQuery ->
  $('#companyBoxList').dataTable
    sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
    sPaginationType: "bootstrap"
    bJQueryUI: true
    bProcessing: true
    bServerSide: true
    sAjaxSource: $('#companyBoxList').data('source')
like image 507
Dudo Avatar asked Dec 04 '22 00:12

Dudo


2 Answers

You have 6 options:

  • numbers - Page number buttons only
  • simple - 'Previous' and 'Next' buttons only
  • simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
  • full - 'First', 'Previous', 'Next' and 'Last' buttons
  • full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
  • first_last_numbers - 'First' and 'Last' buttons, plus page numbers

The numbers and first_last_numbers options were recently added.

(src: http://www.datatables.net/examples/basic_init/alt_pagination.html)


So in your case :

// Code jQuery.
$('#companyBoxList').dataTable({
  pagingType: "simple"
});
like image 91
jteks Avatar answered Feb 01 '23 01:02

jteks


Note that this answer referred to an older version of DataTables. There are now six pagination options:

numbers - Page number buttons only (1.10.8)
simple - 'Previous' and 'Next' buttons only
simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
full - 'First', 'Previous', 'Next' and 'Last' buttons
full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
first_last_numbers - 'First' and 'Last' buttons, plus page numbers


http://www.datatables.net/usage/options

sPaginationType

DataTables features two different built-in pagination interaction methods ('twobutton' or 'fullnumbers') which present different page controls to the end user. Further methods can be added using the API (see below).

Update: Apparently the Bootstrap plugin forces its own pagination layout. You could do this instead:

#my_table .pagination li {display: none;}
#my_table .pagination li.prev, #my_table .pagination li.next {display: inline;}
like image 24
isherwood Avatar answered Feb 01 '23 03:02

isherwood