pageGo.js

分页组件

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

1.效果图展示

2.实现功能罗列

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

3.使用步骤

（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；
// 第二个是表格的填充数据（格式需要是一个数组，每行数据是数组的一个元素）
// 第三个是自定义的组件样式
// 第四个是表格的渲染函数