js分页、表格

标签：style   blog   http   ar   io   color   使用   sp   for   

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表格 生成表格代码
//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;
}

 /*表格样式*/
        .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数组的环节，不过那也不是此文章的重点。

js分页、表格

标签：style   blog   http   ar   io   color   使用   sp   for   

原文地址：http://blog.csdn.net/wj512416359/article/details/41962449