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 中的分页期间滚动到第一行