网上搜了一下,插件有很多,但也懒得测试,就自己写了一个,封装的较为一般,代码如下;
1、导入所需文件
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="pageing.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" />
2、定义ul
<ul class="pagination pagination-lg" id="myPage"></ul>
3、调用js,分页
<script type="text/javascript">
var myPage = "";
$(function() {
myPage = $("#myPage");
goPage(1);
});
function goPage(currentPage) {
var obj = {};
obj.page = currentPage;
obj.rows = 10;
$.ajax({
url : "",
type : "post",
data : obj,
dataType : "json",
success : function(data) {
var obj = data.data;
initPage(data.page, data.total);//传递的参数,当前页、所有页
}
});
}
</script>
4、测试
pageing.js的代码
function initPage(currentPage, totalPage) {
myPage.empty();
if (totalPage > 0) {
if (currentPage > 1) {
myPage.append('<li><a onclick="goPage(1)">首页</a></li>');
myPage.append('<li> <a onclick=goPage(' + (currentPage - 1)
+ ')>上一页</a></li>');
}
if (totalPage > 6) {
if (currentPage >= 1 && currentPage <= 4) {
for (var i = 1; i <= 6; i++) {
myPage.append('<li> <a onclick=goPage(' + i + ')>' + i
+ '</a></li>');
}
} else if (currentPage > 4 && currentPage <= totalPage - 2) {
for (var i = currentPage - 3; i < currentPage + 3; i++) {
myPage.append('<li> <a onclick=goPage(' + i + ')>' + i
+ '</a></li>');
}
} else if (currentPage > totalPage - 2
&& currentPage <= totalPage) {
for (var i = totalPage - 5; i <= totalPage; i++) {
myPage.append('<li> <a onclick=goPage(' + i + ')>' + i
+ '</a></li>');
}
}
} else {
for (var i = 1; i <= totalPage; i++) {
myPage.append('<li> <a onclick="goPage(' + i + ')">' + i
+ '</a></li>');
}
}
if (currentPage < totalPage) {
myPage.append('<li><a onclick=goPage(' + (currentPage + 1)
+ ')>下一页</a></li>');
myPage.append('<li><a onclick=goPage(' + totalPage
+ ')>尾页</a></li>');
}
}
}