JQuery Datatables 分页:从当前页面显示 2 个上一个和 2 个下一个数字

Posted

技术标签:

【中文标题】JQuery Datatables 分页:从当前页面显示 2 个上一个和 2 个下一个数字【英文标题】:JQuery Datatables pagination: show 2 previous and 2 next numbers from current page 【发布时间】:2018-10-15 00:08:30 【问题描述】:

在 JQuery Datatable 我有以下分页样式。

|Previous|1| ....|4|5|6|...|13|Next|

但我想要这样的东西。

|Previous|1| ...|3|4|5|6|7|...|13|Next|

在这两种情况下,5 都是当前页面。有什么方法可以实现吗?非常感谢。

【问题讨论】:

【参考方案1】:

像这样:

var count_of_pages=13;

function set_pages(_page)
   $('#test').empty();
   if(_page==1)
   	     //start no act
   	   $('#test').append('<div class="white-btn-noactive">Previous</div>');
   else
   	     //start act
   	   $('#test').append('<div class="white-btn" onclick="alert(\'start page '+(_page-1)+'\');set_pages('+(_page-1)+');">Previous</div>');
   
   if(_page>3)
        //1
      $('#test').append('<div class="white-btn" onclick="alert(\'start page '+1+'\');set_pages(1);">'+1+'</div>');
       //.....
      $('#test').append('<div style="display:inline-block;">...</div>');
   
   for(var i = 1; i < count_of_pages+1; i++) 
   	     if(((i-2)==_page)||((i-1)==_page)||(i==_page)||((i+1)==_page)||((i+2)==_page))
   	  	     if(i==_page)
   	  	     	$('#test').append('<div class="white-btn-active">'+i+'</div>');
   	  	     else
   	  	     	$('#test').append('<div class="white-btn" onclick="alert(\'start page '+i+'\');set_pages('+i+')">'+i+'</div>');
   	  	     
   	     
   	  
   if(_page<count_of_pages-3)
        ///....
        $('#test').append('<div style="display:inline-block;">...</div>');
        //count_of_pages
        $('#test').append('<div class="white-btn" onclick="alert(\'start page '+count_of_pages+'\');set_pages('+count_of_pages+');">'+count_of_pages+'</div>');
   
   if(_page==count_of_pages)
   	   //end no act
   	  $('#test').append('<div class="white-btn-noactive">Next</div>');
   else
   	   //end act
   	  $('#test').append('<div class="white-btn" onclick="alert(\'start page '+(_page+1)+'\');set_pages('+(_page+1)+');">Next</div>');
   



set_pages(6);
.white-btn
  	display:inline-block;
  	margin:1px;
  	padding:2px;
  	padding-left:6px;
  	padding-right:6px;
    border-style:solid;
    border-width:2px;
    border-color:gray;
    color:gray;
    border-radius:4px;
    font-weight:bold;
    cursor:pointer;
  
  .white-btn:hover
  	border-color:black;
  	color:black;
  
  .white-btn-active
  	display:inline-block;
  	margin:1px;
  	padding:2px;
  	padding-left:6px;
  	padding-right:6px;
    border-style:solid;
    border-width:2px;
    border-color:red;
    color:red;
    border-radius:4px;
    font-weight:bold;
  
  .white-btn-noactive
  	display:inline-block;
  	margin:1px;
  	padding:2px;
  	padding-left:6px;
  	padding-right:6px;
    border-style:solid;
    border-width:2px;
    border-color:gray;
    color:gray;
    border-radius:4px;
    font-weight:bold;
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="test"></div>


</br></br>
<input type="button" value="set page 5" onclick="set_pages(5);">
<input type="button" value="set page 9" onclick="set_pages(9);">
<input type="button" value="set page 13" onclick="set_pages(13);">
<input type="button" value="set page 1" onclick="set_pages(1);">
<input type="button" value="set page 3" onclick="set_pages(3);">

【讨论】:

非常好的解释和例子。赞赏。非常感谢,伙计。但我想要一个简单的方法来使用datatables。我在 ***.com/questions/24383805/… 上找到了解决方案。非常感谢。【参考方案2】:

我从类似类型的 *** 问题中找到了解决方案。

DataTables change number of pagination buttons

上述问题的解决方案是加载datatable并添加以下代码行作为要求。

<script type="text/javascript">
    $.fn.DataTable.ext.pager.numbers_length = 9;
    // number need to be odd number; default is 7
</script>

【讨论】:

以上是关于JQuery Datatables 分页:从当前页面显示 2 个上一个和 2 个下一个数字的主要内容,如果未能解决你的问题,请参考以下文章

jquery.datatables 分页功能

如何在 jQuery DataTables 中的分页期间滚动到第一行

求教jquery datatables 插件如何生成一列序号列

jQuery / DataTables:如何更改分页颜色

jQuery Datatables 分页设置

jQuery DataTables 分页大小