js html生成图片 自动分页,科学网—利用JS生成分页式table - 程冬的博文

JS创建分页式table的效果图二

1. 首先编写HTML指定利用JS生成table的DIV位置：

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

{

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 = '

tableHTML += '

';

for(var i=0; i

tableHTML += '

' + tableHeader[i] + '';

}

tableHTML += '

';

if(tableData != null){

for(var i=0; i

tableHTML += '

';

for(var j=0; j

tableHTML += '

' + tableData[i][j] + '';

}

tableHTML += '

';

}

}

tableHTML += '

';

return tableHTML;

},

//js分页

//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数

jsPage: function(el, count, pageStep, pageNum, fnGo) {

this.getLink = function(fnGo, index, pageNum, text) {

var s = '

if(index == pageNum) {

s += 'class="aCur" ';

}

text = text || index;

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;

}

}

/******************随机生成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

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

iChar = this.rand(19968, 40869);

var chr = String.fromCharCode(iChar);

chr = chr.replace(/&/g,"&")

.replace(/

.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

var iChar = this.rand(48, 122);

var chr = String.fromCharCode(iChar);

chr = chr.replace(/&/g,"&")

.replace(/

.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

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

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;

}