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{100%;height:auto;margin-top:20px}.page .pageIn{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 })
效果图如下
