javascript 分页插件
·
js分页插件用于ajax 分页。最近项目需要js分页插件。回家加班化俩个小时完成了这个js插件。本茶插件需要jQuery支持。
写文章的主要作用是为了给做个笔记以防以后忘记了。所以我就不加注释了。所有的行数和相关变量。通过函数名和变量名称去识别。
核心js文件
var Pagination = {
showPageCount: 7,
init: function (obj, callback) {
this.bindListener(obj, callback);
},
createHtml: function (pageIndex, recordCount, pageSize) {
var pageCount = Math.ceil(recordCount / pageSize);
var showPageCount = this.showPageCount;
var MaxCount = 10000000000;
var HalfPageCount = (showPageCount + 1) / 2;
var html = [];
if (pageCount > MaxCount) {
pageCount = MaxCount;
}
if (pageIndex > pageCount - 1) {
pageIndex = pageCount - 1;
}
if (pageIndex > 0) {
html.push("<span class=\"previous\"><a href=\"#\" page= " + (pageIndex - 1) + " data-rec=\"上一页\">上一页</a></span>");
}
else {
html.push("<span class=\"disable previous\">上一页</span>");
}
if (pageCount <= showPageCount) {
for (var i = 0; i < pageCount; i++) {
if (pageIndex == i) {
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
}
else {
html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");
}
}
}
else if (pageIndex < HalfPageCount) {
for (var i = 0; i < showPageCount - 1; i++) {
if (pageIndex == i) {
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
}
else {
html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");
}
}
html.push("<span class=\"dots\">...</span>");
html.push("<span class=\"num\"><a href=\"#\" page=" + (pageCount - 1) + ">" + pageCount + "</a></span>");
}
else if (pageIndex >= pageCount - HalfPageCount - 1) {
html.push("<span class=\"num\"><a href=\"#\" page='0'>" + 1 + "</a></span>");
html.push("<span class=\"dots\">...</span>");
for (var i = pageCount - showPageCount + 1; i < pageCount; i++) {
if (pageIndex == i) {
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
}
else {
html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");
}
}
}
else {
html.push("<span class=\"num\"><a href=\"#\" page=0>" + 1 + "</a></span>");
html.push("<span class=\"dots\">...</span>");
for (var i = pageIndex - HalfPageCount / 2; i <= pageIndex + HalfPageCount / 2; i++) {
if (pageIndex == i) {
html.push("<span class=\"current num\">" + (i + 1) + "</span>");
}
else {
html.push("<span class=\"num\"><a href=\"#\" page=" + i + ">" + (i + 1) + "</a></span>");
}
}
html.push("<span class=\"dots\">...</span>");
html.push("<span class=\"num\"><a href=\"#\" page =" + (pageCount - 1) + ">" + pageCount + "</a></span>");
}
if (pageIndex < pageCount - 1) {
html.push("<span class=\"next\"><a href=\"#\" page=" + (pageIndex + 1) + " data-rec=\"下一页\">下一页</a></span>");
}
else {
html.push("<span class=\"disable next\">下一页</span>");
}
html.push("<span class=\"total\">每页" + pageSize + "条</span>");
html.push("<span class=\"total total_page\">共" + pageCount + "页</span>");
html.push("<span class=\"page_jump\">到</span><input id='pageInput' oldpage='' maxlength='" + pageCount + "' type='text' ><span class=\"page_jump\">页</span><button type='button' id='pagebtn'>确定</button>");
//html.push("<script>pagination(" + pageCount + ",$('#pageInput'), $('#pagebtn'));</script>");
return html.join("");
},
bindListener: function (obj,callback) {
obj.on("click", "a", function () {
if (typeof callback === "function") {
var index = $(this).attr("page");
callback(parseInt(index));
}
return false;
});
obj.on("click","button",function(){
var pageInput = $("#pageInput");
if (typeof callback === "function") {
var index = pageInput.val();
callback(parseInt(index)-1);
}
return false;
});
var pageButton = $("#pageButton");
obj.on("keyup","input",function(e){
switch (e.keyCode) {
case 37:
break;
case 38:
break;
case 39:
break;
case 40:
break;
case 13:
changePage();
break;
case 8:
$(e.target).attr('oldpage', $(e.target).val());
break;
case 46:
$(e.target).attr('oldpage', $(e.target).val());
break;
default :
validPage();
}
return false;
});
//分页
function changePage() {
var pageInput = $("#pageInput");
var page = pageInput.val();
var maxPage = parseInt($(".total_page").html().substring(1,4));
var pattern = new RegExp("^[1-9]\\d{0," + maxPage.toString().length + "}$");
if (page.trim() == "") {
pageInput.focus();
return;
}
if (pattern.test(page)) {
page = parseInt(page);
maxPage = parseInt(maxPage);
if (page > maxPage || page < 0) {
pageInput.val("").focus();
return;
}
} else {
pageInput.val("").focus();
return;
}
callback(parseInt(page));
}
//页码校验v2
function validPage() {
var pageInput = $("#pageInput");
var maxPage = parseInt($(".total_page").html().substring(1,4));
var page = pageInput.val();
var pattern = /^[0-9]+$/;
var oldpage = pageInput.attr("oldpage") || '';
if (page.trim() == "") {
pageInput.val("");
return;
}
if (!pattern.test(page)) {
pageInput.val(oldpage);
return;
}
var pageInt = parseInt(page);
if (page.substr(0, 1) == '0') {
pageInput.val(pageInt);
}
if (pageInt == 0) {
pageInput.val('');
return;
}
if (pageInt > parseInt(maxPage)) {
pageInput.val(page.substr(0, page.length - 1));
return;
}
pageInput.attr('oldpage', pageInput.val());
}
},
Page: function (obj, pageIndex, recordCount, pageSize) {
obj.empty();
obj.html(this.createHtml(pageIndex, recordCount, pageSize));
}
}
调用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="pagination.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="pageination_plugin"></div>
<script typeof="text/javascript">
function a(i) { //定义回掉函数
alert("index is :" + i);
Pagination.Page($(".pageination_plugin"),i,10000,20);
}
Pagination.init($(".pageination_plugin"),a); //初始化插件
Pagination.Page($(".pageination_plugin"),10,100000 , 20); //首次调用
</script>
</body>
</html>更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)