ajax 异步分页

网上搜了一下,插件有很多,但也懒得测试,就自己写了一个,封装的较为一般,代码如下;

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>');
			}
		}
	}






猜你喜欢

转载自blog.csdn.net/qq_21299835/article/details/80866868