javascript 分页插件

来源：互联网发布：手机淘宝群网页版编辑：程序博客网时间：2024/06/18 05:50

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));}//页码校验v2function 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>

阅读全文

0 0