js分页、表格

article/2025/9/18 3:43:39

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 + '" οnclick="' + 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');
}