分页显示--html,js处理

效果如下：



.pageJumpDiv{
display: inline-block;
font-size: 14px;
color: #666;
position: relative;
top:-1px;
}
.pageJumpDiv input{
width:45px;
height: 26px;
padding-left: 5px;

border:1px solid #ccc;
}
.pageJumpDiv button{
color:#666;
height: 28px;
padding: 2.5px 12px;
}
//以上css

<div id="temp2-container" class="dataTables_wrapper no-footer">
<script id="temp2" type="text/template">
<div class="dataTables_info">共<%=data.sum_count%>条</div>
<div class="dataTables_paginate paging_simple_numbers">
<a class="paginate_button previous disabled" id="before_page" data-nowpage=<%=data.page%> >上一页</a>
<%if(data.page_count<=5){%>
<% for(var i=0;i<(data.page_count);i++){ %>
<span>
<%if(i==(data.page)-1){%>
<a class="paginate_button current jumpPage"><%=Number(i)+1%></a>
<%}else{%>
<a class="paginate_button jumpPage"><%=Number(i)+1%></a>
<%}%>
</span>
<% } %>
<%}else if(data.page<=4){%>
<% for(var i=0;i<4;i++){ %>
<span>
<%if(i==(data.page)-1){%>
<a class="paginate_button current jumpPage"><%=Number(i)+1%></a>
<%}else{%>
<a class="paginate_button jumpPage"><%=Number(i)+1%></a>
<%}%>
</span>
<% } %>
...
<a class="paginate_button jumpPage"><%=data.page_count%></a>
<%}else if(data.page==(data.page_count-2)){%>
<span>
<a class="paginate_button jumpPage">1</a>
...
<a class="paginate_button jumpPage"><%=data.page-1%></a>
<a class="paginate_button current jumpPage"><%=data.page%></a>
<a class="paginate_button jumpPage"><%=Number(data.page)+1%></a>
<a class="paginate_button jumpPage"><%=data.page_count%></a>
</span>
<%}else if(data.page==(data.page_count-1)){%>
<span>
<a class="paginate_button jumpPage">1</a>
<a class="paginate_button jumpPage">2</a>
...
<a class="paginate_button jumpPage"><%=data.page-1%></a>
<a class="paginate_button current jumpPage"><%=data.page%></a>
<a class="paginate_button jumpPage"><%=data.page_count%></a>
</span>
<%}else if(data.page==(data.page_count)){%>
<span>
<a class="paginate_button jumpPage">1</a>
<a class="paginate_button jumpPage">2</a>
...
<a class="paginate_button jumpPage"><%=data.page-2%></a>
<a class="paginate_button jumpPage"><%=data.page-1%></a>
<a class="paginate_button current jumpPage"><%=data.page%></a>
</span>
<%}else{%>
<span>
<a class="paginate_button jumpPage">1</a>
...
<a class="paginate_button jumpPage"><%=data.page-1%></a>
<a class="paginate_button current jumpPage"><%=data.page%></a>
<a class="paginate_button jumpPage"><%=Number(data.page)+1%></a>
...
<a class="paginate_button jumpPage"><%=data.page_count%></a>
</span>
<%}%>
<a class="paginate_button next disabled" id="after_page" data-nowpage=<%=data.page%> data-maxpage=<%=data.page_count%> >下一页</a>

<div class="pageJumpDiv">共<%=data.page_count%>页，跳转至第
<input type="number" id="jump-page-input" min="1" max=<%=data.page_count%> value=<%=Number(data.page)+1%> >页
<button class="btn btn-default radius" id="page-jump-sure-button">确定</button> </div>

</div>

</script>
</div>
//html中的模板块

//分页
var pageData={};
pageData.page=JSON.parse(data).data.page;
pageData.page_count=Math.ceil(JSON.parse(data).data.count/limit);
pageData.sum_count=JSON.parse(data).data.count;

var html2=ejs.render(tem2,{data:pageData});
document.getElementById("temp2-container").innerHTML = html2;

clickPageNum();
beforePage();
afterPage();
jumpInputPage();
//以上部分写在拉数据getPageData()的方法中的拉取到数据成功后的地方。

//点击1234页数
function clickPageNum() {
$('#temp2-container').find('.jumpPage').click(function () {
var click_num=this.innerHTML;
var now_page=document.getElementById('before_page').dataset.nowpage;
if(click_num!=now_page){
// var now_page=document.getElementById('before_page').dataset.nowpage;
getPageData(click_num);//拉取数据的方法
}
});
}
//点击上一页
function beforePage() {
$('#before_page').click(function () {
if(document.getElementById('after_page').dataset.maxpage!=0){
var now_page=this.dataset.nowpage;
if(now_page-1>0){
getPageData(now_page-1);//拉取数据的方法
}
else {
$.Huimodalalert('已经是第一页！',1500);
}
}

});
}
function afterPage() {
$('#after_page').click(function () {
if(this.dataset.maxpage!=0){
var now_page=this.dataset.nowpage;
if(Number(now_page)>=Number(this.dataset.maxpage)){
$.Huimodalalert('已经是最后一页！',1500);
}
else {
getPageData(Number(now_page)+1);//拉取数据的方法
}
}
});
}
//跳转至第几页
function jumpInputPage() {
$('#page-jump-sure-button').click(function () {
var input_num=$('#jump-page-input').val();
console.log(input_num);
var next_page_id=document.getElementById('after_page');
var now_page=next_page_id.dataset.nowpage;
var max_page=next_page_id.dataset.maxpage;
// console.log(Number(input_num)>Number(max_page));
if(Number(input_num)<1){
console.log('输入页码过小');
}
else if(Number(input_num)>Number(max_page)){
console.log('输入页码过大');
}else if(Number(input_num)==Number(now_page)){
console.log('输入为当前页');
}
else{
getPageData(input_num);//拉取数据的方法
}
});
}