jQuery+Ajax实现无刷新分页

2020-05-24 21:39:46易采站长站整理

return true;
}
else {
return false;
}
}
this.nextPage = function(){
if(current_page < numPages()-1) {
pageSelected(current_page+1);
return true;
}
else {
return false;
}
}
// 所有初始化完成,绘制链接
drawLinks();
// 回调函数
//opts.callback(current_page, this);
});
}

代码还是比较容易看明白的,可以根据自己需要修改,这里使用的是自己的样式

样式代码:


.pages {display: inline-block; overflow: hidden;padding: 15px 0;text-align: center; width:100%; margin:50px 0;}
.pages b{ color:#e75f49;}
.pages a { color:#666; border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;margin-right: 5px; padding: 8px 12px; text-decoration: none; background-color:#fafafa;}
.pages .currentPage{ background-color: #00a0e9; border: 1px solid #00a0e9;color: #fff; font-weight: bold;}

显示效果如下:

 

原来的css样式:


.pagination a {
text-decoration: none;
border: 1px solid #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: inline-block;
padding: 0.1em 0.4em;
margin-right: 5px;
margin-bottom: 5px;
}

.pagination .current {
background: #26B;
color: #fff;
border: 1px solid #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}

可以根据自己设计显示样式

2、使用方法

2.1、html显示


<div class="second-ul-ctn">
<ul class="second-ul" id="ulProducts">
</ul>
<div class="pages">
<input type="hidden" id="hideTotalCount" />
<div id="Pagination" class="pagination">
</div>
</div>
</div>

ulProducts中放的是要显示的数据,生成的分页的工具条是放在Pagination中的

2.2 javascript代码


$(function () {
searchMyme(0);
pageInit();
$("#btnSearch").on("click", function () {
searchMyme(0);
pageInit();
return false;
});
});
function searchMyme(page, pageination) {
var month = $("#btnMonth").val();
var obj = {
Month: month,
OpType: "getme",
page: (page + 1)
, rows: 10
};
var url = "../../Controler/FinaceMo/GetStaffIncome_H.ashx";