博文
利用JS生成分页式table
|||
JS创建分页式table的效果图一
JS创建分页式table的效果图二
1. 首先编写HTML指定利用JS生成table的DIV位置：
<body>
<!-- 用于生成表格的DIV -->
<div id="tableHTML" style="font-family: Consolas;"></div>
<!-- 用于分页显示 -->
<div id="divPage"></div>
</body>
2. 相关的JS代码如下：
var TableOper = {
iniTable: function(){
this.goPage(1);
},
// pageIndex：该页面位于第几页;
goPage: function(pageIndex) {
/*var tableHeader = ['序号', 'ID', '时间', '金额', '备注'];*/
var tableHeader = ['序号', 'ID', '时间', '金额'];
var tableData = [];
//10为每页要显示的记录数
var count;
if(pageIndex < Math.ceil(85/10)) {
count = 10;
} else {
count = 85%10;
}
for(var i=0; i<count; i++)
{
tableData.push([
10*(pageIndex - 1) + (i + 1),
jsRand.int(1, 1000),
jsRand.date(),
//jsRand.str(),
jsRand.money()
//jsRand.getRndStr(20)
//jsRand.ch(0, 20)
]);
}
document.getElementById('tableHTML').innerHTML = this.createTable(tableHeader,tableData);
this.jsPage('divPage', 85, 10, pageIndex, 'goPage');
},
//生成表格
createTable: function(tableHeader, tableData){
if (tableHeader == null) {
return "";
}
var tableHTML = '<table class="tbData">';
tableHTML += '<tr>';
for(var i=0; i<tableHeader.length; i++) {
tableHTML += '<th>' + tableHeader[i] + '</th>';
}
tableHTML += '</tr>';
if(tableData != null){
for(var i=0; i<tableData.length; i++) {
tableHTML += '<tr>';
for(var j=0; j<tableData[i].length; j++) {
tableHTML += '<td>' + tableData[i][j] + '</td>';
}
tableHTML += '</tr>';
}
}
tableHTML += '</table>';
return tableHTML;
},
//js分页
//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数
jsPage: function(el, count, pageStep, pageNum, fnGo) {
this.getLink = function(fnGo, index, pageNum, text) {
var s = '<a href="#p' + index + '" onclick="TableOper.' + 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;
}
}
/******************随机生成Data对象*********************************/
var jsRand = {
//生成0-9a-zA-Z生成的随机字符串,k为规模
getRndStr: function(k){
var s=[];
var a=parseInt(Math.random()*25)+(Math.random()>0.5?65:97);
for (var i=0;i<k;i++){
s[i]=Math.random()>0.5?parseInt(Math.random()*9):String.fromCharCode(parseInt(Math.random()*25)+(Math.random()>0.5?65:97));
}
return s.join("");
},
//随机数字
int: function(min,max){
return this.show('i', min, max);
},
//随机字符
str: function(min,max){
return this.show('mc', min, max);
},
//随机日期
date: function(){
return this.show('d');
},
//随机金额
money: function(min,max){
return this.show('m', min, max);
},
//随机汉字
ch: function(min,max){
return this.show('ch', min, max);
},
show: function(type,min,max) {
var str;
switch(type){
case 'i':
str = this.rand(min, max);
break;
case 'm':
str = '￥' + this.rand(min, max) + '.00';
break;
case 'd':
str = this.rand(1990,2020) + '-';
str += this.rand(1,12,2) + '-';
str += this.rand(1,31,2) + ' ';
str += this.rand(0,23,2) + ':';
str += this.rand(1,59,2);
break;
case 'ch':
min = min||0;
max = max||10;
str = '';
var len = this.rand(min, max);
for(var i=0; i<len; i++) {
iChar = this.rand(19968, 40869);
var chr = String.fromCharCode(iChar);
chr = chr.replace(/&/g,"&")
.replace(/</g,"<")
.replace(/>/g,">")
.replace(/ /g," ")
.replace(/'/g,"'")
.replace(/"/g,""");
str += chr;
}
break;
case 'mc':
min = min||0;
max = max||10;
str = '';
var len = this.rand(min, max);
for(var i=0; i<len; i++) {
var iChar = this.rand(48, 122);
var chr = String.fromCharCode(iChar);
chr = chr.replace(/&/g,"&")
.replace(/</g,"<")
.replace(/>/g,">")
.replace(/ /g," ")
.replace(/'/g,"'")
.replace(/"/g,""");
str += chr;
}
break;
default:str='';
}
return str;
},
// GBK转为UTF-8
easyUTF8: function(gbk){
if(!gbk){return '';}
var utf8 = [];
for(var i=0;i<gbk.length;i++){
var s_str = gbk.charAt(i);
if(!(/^%u/i.test(escape(s_str)))){utf8.push(s_str);continue;}
var s_char = gbk.charCodeAt(i);
var b_char = s_char.toString(2).split('');
var c_char = (b_char.length==15)?[0].concat(b_char):b_char;
var a_b =[];
a_b[0] = '1110'+c_char.splice(0,4).join('');
a_b[1] = '10'+c_char.splice(0,6).join('');
a_b[2] = '10'+c_char.splice(0,6).join('');
for(var n=0;n<a_b.length;n++){
utf8.push('%'+parseInt(a_b[n],2).toString(16).toUpperCase());
}
}
return utf8.join('');
},
rand: function(min, max, len) {
min = min||0;
max = max||1000;
var val = min + Math.round(Math.random() * (max-min));
if(len) {
while((''+val).length < len) {
val = '0' + val;
}
}
return val;
}
}
/**************JS优先加载*******************/
window.onload = function(){
var tableOper = TableOper;
tableOper.iniTable();
}
3. 相关CSS如下：
/*表格样式*/
.tbData {
border-collapse:collapse;
border-spacing:0px;
border:solid 3px #ddd;
font-size:14px;
font-family:Consolas;
color:#333;
background-color:white;
margin:10px 0px;
}
.tbData th, td {
border:solid 1px #ddd;
padding:5px 8px;
}
.tbData th {
border-bottom:solid 2px #ddd;
background-color:#eef;
font-weight:normal;
color:blue;
}
#tableHTML .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;
}
https://blog.sciencenet.cn/blog-448935-603809.html
上一篇：Ajax学习笔记
下一篇：Ajax异步获取Json格式数据渲染Table控件
