js分頁、表格

js分頁、表格

js分頁代碼：

//js分頁//el:分頁容器 count:總記錄數 pageStep:每頁顯示多少個 pageNum:第幾頁 fnGo:分頁跳轉函數var jsPage = function(el, count, pageStep, pageNum, fnGo) {    this.getLink = function(fnGo, index, pageNum, text) {        var s = '' + text + ' ';                    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 += '上一頁 ';    }    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 += '下一頁 ';    }    var divPage = document.getElementById(el);    divPage.innerHTML = s;}

js建立表格代碼：

//js表格 產生表格代碼//arrTh 表頭資訊//arrTr 資料var getTable = function(arrTh, arrTr){    var s = '
 
  ';    s += '
  
    '; for(var i=0; i' + arrTh[i] + ''; } s += '
   '; for(var i=0; i'; for(var j=0; j' + arrTr[i][j] + ''; } s += ''; } s += '
  ';    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數組的環節，不過那也不是此文章的重點。