Js paging, table, and js paging table

Js paging, table, and js paging table

Js paging code:

// Js paging // el: Paging container count: Total number of records pageStep: the number of pageNum displayed on each page: page number fnGo: Paging jump function 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;} // the total number of pages var pageNumAll = Math. ceil (count/pageStep); if (pageNumAll = 1) {divPage. innerHTML = ''; return;} var itemNum = 5; // The number of pageNum = Math displayed on both sides of the current page. max (pageNum, 1); pageNum = Math. min (pageNum, pageNumAll); var s = ''; if (pageNum> 1) {s + = this. getLink (fnGo, pageNum-1, pageNum, 'preput');} else {s + = '<span> previous page </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, 'next page');} else {s + = '<span> next page </span>';} var divPage = document. getElementById (el); divPage. innerHTML = s ;}

Js table creation code:

// Js table Generation table code // arrTh header information // arrTr data 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 ;}

Table css style:

/* Table style */. 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;}/* Paging style */# 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 ;}

Usage:

Function gopage (pageIndex, pageStep) {var len = dt. length; var arrTh = ['sequence No. ', 'id', 'name', 'type', 'route name', 'direction of travel', 'center station No ', 'Warning type', 'level', 'Evaluation time']; 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 ('diddata '). innerHTML = getTable (arrTh, arrTr); jsPage ('divpage', len, pageStep, pageIndex, 'gopage ');}

gopage(1,5);

Result:

Ps: The data acquisition of dt arrays is omitted here, but that is not the focus of this article.