js分页、表格

来源：互联网发布：我欲封天蛇魅进阶数据编辑：程序博客网时间：2024/06/13 04:04

js分页代码：

//js分页//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数var jsPage = function(el, count, pageStep, pageNum, fnGo) {    this.getLink = function(fnGo, index, pageNum, text) {        var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ');" ';        if(index == pageNum) {            s += 'class="aCur" ';        }        text = text || index;        s += '>' + text + '</a> ';                    return s;    }        //总页数    var pageNumAll = Math.ceil(count / pageStep);    if (pageNumAll == 1) {        divPage.innerHTML = '';        return;    }    var itemNum = 5; //当前页左右两边显示个数    pageNum = Math.max(pageNum, 1);    pageNum = Math.min(pageNum, pageNumAll);    var s = '';    if (pageNum > 1) {        s += this.getLink(fnGo, pageNum-1, pageNum, '上一页');    } else {        s += '<span>上一页</span> ';    }    var begin = 1;    if (pageNum - itemNum > 1) {        s += this.getLink(fnGo, 1, pageNum) + '... ';        begin = pageNum - itemNum;    }    var end = Math.min(pageNumAll, begin + itemNum*2);    if(end == pageNumAll - 1){        end = pageNumAll;    }    for (var i = begin; i <= end; i++) {        s += this.getLink(fnGo, i, pageNum);    }    if (end < pageNumAll) {        s += '... ' + this.getLink(fnGo, pageNumAll, pageNum);    }    if (pageNum < pageNumAll) {        s += this.getLink(fnGo, pageNum+1, pageNum, '下一页');    } else {        s += '<span>下一页</span> ';    }    var divPage = document.getElementById(el);    divPage.innerHTML = s;}

js创建表格代码：

//js表格 生成表格代码//arrTh 表头信息//arrTr 数据var getTable = function(arrTh, arrTr){    var s = '<table class="tbData">';    s += '<tr>';    for(var i=0; i<arrTh.length; i++) {        s += '<th>' + arrTh[i] + '</th>';    }    s += '</tr>';    for(var i=0; i<arrTr.length; i++) {        s += '<tr>';        for(var j=0; j<arrTr[i].length; j++) {            s += '<td>' + arrTr[i][j] + '</td>';        }        s += '</tr>';    }    s += '</table>';    return s;}

表格css样式：

 /*表格样式*/        .tbData {            border-collapse: collapse;            border-spacing: 0px;            border: solid 3px #ddd;            font-size: 12px;            font-family: Consolas;            color: #333;            background-color: white;            margin: 10px 0px;        }            .tbData td {                border: solid 1px #ddd;                padding: 5px 8px;            }            .tbData td {                border: solid 1px #ddd;                padding: 5px 8px;            }            .tbData tr:hover {                background-color: #a9a9a9;                cursor: pointer;            }            .tbData th {                border-bottom: solid 2px #ddd;                background-color: #eef;                font-weight: normal;                color: blue;                text-align: center;                           }        #divData .tbData tr:hover {            background-color: #fef;        }        /*分页样式*/        #divPage {            text-align: left;            margin: 10px 0px;            height: 30px;            font-size: 12px;        }            #divPage a, #divPage span {                text-decoration: none;                color: Blue;                background-color: White;                padding: 3px 5px;                font-family: Consolas;                text-align: center;                border: solid 1px #ddd;                display: inline-block;            }            #divPage span {                color: gray;            }            #divPage a:hover {                color: Red;            }            #divPage .aCur {                background-color: green;                color: White;                font-weight: bold;            }

使用方法：

function gopage(pageIndex, pageStep) {            var len = dt.length;            var arrTh = ['序号', 'ID', '名称', '类型', '路线名称', '行驶方向', '中心桩号', '预警类型','等级', '评定时间'];            var arrTr = [];            var startIndex = (pageIndex - 1) * pageStep;            var endIndex = 0;            if (pageIndex * pageStep > len) {                endIndex = len;            } else {                endIndex = pageIndex * pageStep;            }            for (var i = startIndex; i < endIndex; i++) {                arrTr.push([i + 1,                    dt[i].RBGDBI_ID,                    dt[i].DisasterName,                    dt[i].DisasterTypeName,                    dt[i].RoadCodeName,                    dt[i].Direction,                    dt[i].RoadPile,                    dt[i].YJType,                    dt[i].Level,                    dt[i].time]);            }            document.getElementById('divdata').innerHTML = getTable(arrTh, arrTr);            jsPage('divPage', len, pageStep, pageIndex, 'gopage');        }

gopage(1,5);

结果显示：

ps：此处省略了数据获取dt数组的环节，不过那也不是此文章的重点。

0 0