【javascript】js分页控件

 

  1 var modelPage={//分页控件
  2         //调用示例
  3         codeExp: function () {
  4             modelPage.initPage({
  5                 pagerowcount: 215,//数据总共多少条
  6                 pageindex: 1,//当前第几页
  7                 pagesize:10,//一页多少条
  8                 domid: 'pageid',
  9                 pageclick: function (pageindex) { }
 10             })
 11         },
 12         //分页 配合梅珍写的样式使用
 13         initPage: function (setting) {
 14             this.pagecontent(setting);
 15         },
 16         pagecontent: function (setting) {
 17             if (!setting.pageindex) setting.pageindex = 1;
 18             if (!setting.pagesize) setting.pagesize = 10;
 19             if (!setting.showcount) setting.showcount = 5;
 20             //alert(setting.pagecount)
 21             if (!setting.pagerowcount) alert("缺少参数pagerowcount");
 22             if (!setting.domid) alert("缺少参数domid");
 23             if (!setting.pageclick) alert("缺少回调函数pageclick");
 24             if (setting.pagerowcount) {
 25                 setting.pagecount = parseInt(setting.pagerowcount % setting.pagesize > 0 ? (setting.pagerowcount / setting.pagesize) + 1 : setting.pagerowcount / setting.pagesize);
 26             }
 27             var itemthis = this;
 28             var div_page = document.createElement("div");
 29             div_page.className = "page";
 30             div_page.id = setting.domid;
 31             var div_pageIn = document.createElement("div");
 32             div_pageIn.className = "pageIn";
 33 
 34             this.pageset(setting, div_pageIn, itemthis);
 35 
 36             div_page.appendChild(div_pageIn);
 37             var dom = document.getElementById(setting.domid);
 38             dom.parentElement.replaceChild(div_page, dom);
 39         },
 40         pageset: function (setting, div_pageIn, itemthis) {
 41             /*处理分页参数*/
 42             if (setting.pageindex > 1) {
 43                 var link_a = document.createElement("a");
 44                 link_a.innerText = "首页";
 45                 link_a.onclick = function () { itemthis.pageclick.call(itemthis, setting, 1); };
 46                 div_pageIn.appendChild(link_a);
 47                 var link_a = document.createElement("a");
 48                 link_a.innerText = "上一页";
 49                 if (setting.pageindex <= 1) link_a.disabled = "disabled";
 50                 else
 51                     link_a.onclick = function () { itemthis.pageclick.call(itemthis, setting, setting.pageindex - 1); };
 52                 div_pageIn.appendChild(link_a);
 53             }
 54 
 55             //var tempshowcount = setting.pagecount < setting.showcount ? setting.pagecount : setting.showcount;
 56             for (var i = 1; i <= setting.showcount; i++) {
 57                 var link_a = document.createElement("a");
 58                 link_a.innerText = parseInt((setting.pageindex - 1) / setting.showcount) * setting.showcount + i;
 59                 if (link_a.innerText > setting.pagecount) break;
 60                 if (link_a.innerText == setting.pageindex) {
 61                     link_a.className = "now";
 62                 }
 63 
 64                 var pageitem = this;
 65 
 66                 link_a.onclick = function (pagei) {
 67                     return function () {
 68                         itemthis.pageclick.call(itemthis, setting, pagei);
 69                     }
 70                 }(link_a.innerText);
 71                 div_pageIn.appendChild(link_a);
 72             }
 73 
 74             if (setting.pageindex < setting.pagecount) {
 75                 var link_a = document.createElement("a");
 76                 link_a.innerText = "下一页";
 77                 if (setting.pageindex >= setting.pagecount) link_a.disabled = "disabled";
 78                 else link_a.onclick = function () { itemthis.pageclick.call(itemthis, setting, setting.pageindex + 1); };
 79                 div_pageIn.appendChild(link_a);
 80 
 81                 var link_a = document.createElement("a");
 82                 link_a.innerText = "最后一页";
 83                 link_a.onclick = function () { itemthis.pageclick.call(itemthis, setting, setting.pagecount); };
 84                 div_pageIn.appendChild(link_a);
 85             }
 86             /*处理分页参数END*/
 87         },
 88         pageclick: function (setting, page) {
 89             page = parseInt(page);
 90             setting.pageindex = page;
 91             this.pagecontent(setting);
 92             setting.pageclick(page);
 93         },
 94         loadCss: function () {
 95             var dom = document.createElement("style");
 96             dom.type = "text/css";
 97             dom.innerText = ".page{width:100%;height:auto;margin-top:20px}.page .pageIn{width:620px;margin:0 auto}.page .pageIn a{display:inline-block;padding:0 15px;height:40px;border:1px solid #ccc;margin-right:3px;line-height:40px;color:#555;font-size:14px}.page .pageIn .now{background:#2dc3e8;border:1px solid #2dc3e8;color:#fff}";
 98             window.document.body.appendChild(dom);
 99         }
100     }
101 
102 modelPage.initPage({
103                 pagerowcount: 215,//数据总共多少条
104                 pageindex: 1,//当前第几页
105                 pagesize:10,//一页多少条
106                 domid: 'pageid',
107                 pageclick: function (pageindex) { }
108             })

View Code

 效果图如下

 

转载于:https://www.cnblogs.com/zspbolg/p/6084688.html