如何使椭圆可点击以显示下一个分页序列 [英] How to have ellipses clickable to show the next sequence of pagination

问题描述

在jQuery DataTables中，分页控件显示如下:

In jQuery DataTables pagination control is displayed like:

1 ... 4 5 6 ... 14

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 ... 7 8 9 ... 14

推荐答案

解决方案

使用以下代码:

$('#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();

其中example是表的ID.

演示

有关代码和演示，请参见此jsFiddle .

See this jsFiddle for code and demonstration.

这篇关于如何使椭圆可点击以显示下一个分页序列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！