How to have ellipses clickable to show the next sequence of pagination

问题

In jQuery DataTables pagination control is displayed like:

1 ... 4 5 6 ... 14

How can I make the ellipses clickable so if it's clicked it will show:

1 ... 7 8 9 ... 14

回答1:

SOLUTION

Use the code below:

$('#example').on('init.dt draw.dt', function(e, settings){
    var api = new $.fn.dataTable.Api(settings);

   $('.dataTables_paginate span a:first + .ellipsis', api.table().container()).replaceWith(
       $('<a class="paginate_button">...</a>').on('click', function(e){ 
           api.page('previous').draw('page'); 
           e.preventDefault();
       })
   ); 

   $('.dataTables_paginate .ellipsis', api.table().container()).replaceWith(
       $('<a  class="paginate_button">...</a>').on('click', function(e){
           api.page('next').draw('page');
           e.preventDefault();
       })
   );        
});

var table = $('#example').DataTable();

where example is ID of your table.

DEMO

See this jsFiddle for code and demonstration.

来源：https://stackoverflow.com/questions/32772041/how-to-have-ellipses-clickable-to-show-the-next-sequence-of-pagination