pageTo是一款简pageTo是一个支持自定义样式的分页

分页组件

pageGo是一个使用方便，支持自定义样式的分页组件。它实现了前端分页基本的功能，包括上一页，下一页，首页，尾页，每页条数选择，跳转等功能。

（1）上一页
（2）下一页
（3）首页
（4）尾页
（5）每页显示多少条数据的选择
（6）跳转到第几页
（7）当前页面的位置
（8）共几条数据

（1） 下载pageGo.js,在需要使用的页面引入pageGo.js
（2） 创建一个放置组件的div盒子，例如

<div class="msg_list"> <table> <thead> <tr style="background: #101010;height: 36px;"> <th>时间</th> <th style="width:80%">事件</th> <th style="width: 26px">详情</th> </tr> </thead> <tbody id='eventDetail'></tbody> </table> <div id="page_controler"></div> </div>

(3) 定义组件样式 组件的样式是一个对象，对象的属性包括：pageBox，btn，pageMsg，pageLocation，textInput
-pageBox:定义分页组件最外层盒子的整体样式
-btn：按钮的样式
-pageMsg：文字信息的整体样式
-pageLocation：当前页文字的样式
-textInput：输入框的样式
例如：

pageStyleOpt = { pageBox:{ // 盒子的整体样式 width:"100%", height:"100%", "text-align":"center", "margin-left":"30px" }, btn:{ // 按钮的样式 background: "#698EC6", border:"0px solid #eee", color:"white", width:"20px", "margin-left":"5px", height:"20px" }, pageMsg:{ // 显示页面信息 "font-size":"14px", color:"#aaa" }, pageLocation:{ // 当前页位置span字体样式 color:"orange" }, textInput:{ // 跳转输入框样式 display:"inline-block", width: "40px", height: "16px", border: "1px solid #aaa", color:"#888", "padding-left":"5px", "margin":"2px 0 0 25px" } }

(4) 定义绘制表格的函数，例如

function setEventDetail(data){ var tbody = ''; var colorData = ["#B6DAFD", "#CCACC8", "#C1E693", "#F0EE95", "#E1AB85", "#8E36AB", "#770EE5", "#30F0FD", "#16A8EC", "#78FB40", "#FFB330",'#ccfe86','ffc967','dda897','aa6699','bcd667','badc01','88f9c0','cce724']; var len = data.length; for(var i=0;i<len;i++){ var trColor = '#101010'; if(i%2!=0){ trColor="#000"; } var time = data[i].createdate.trim().slice(11,data[i].createdate.trim().length) tbody += '<tr style="background:'+trColor+'"><td style="width:100px;text-align:center">'+ time +'</td><td style="padding-left:20px"><span style="color:'+colorData[i]+'">' + data[i].fsf+'</span>&nbsp;&nbsp;<span style="color:#7990A8">发送&nbsp;&nbsp;</span><span style="color:#A9B780">'+ data[i].newpapertype+'</span></td><td class="eDetail" style="text-align:center"><span style="display:none">'+ data[i].id+'</span><i class="fa fa-eye" aria-hidden="true"></i></td></tr>' } $('#eventDetail').html(tbody); }

（5）获取页面控制组件盒子

var pageControler = document.getElementById("page_controler");

(6) 调用pageTo组件实现分页

pageTo(pageControler,sdata,pageStyleOpt,setEventDetail); // pageTo需要传递四个参数，分别是: // 第一个是页面定义的分页组件Dom； // 第二个是表格的填充数据（格式需要是一个数组，每行数据是数组的一个元素） // 第三个是自定义的组件样式 // 第四个是表格的渲染函数