通用的js分页，排序程序
/**
*通用的分页的js代码
*可对JSON格式的二维数据进行静态页面的分页。
* @author:liyi
*
* Edit by liyi:2009年9月11日 增加设置列宽和排序的功能
*
*/
var filetitle;
var filedata;
var fileattr;
var filetotal;
/**
*分页对象
* @jonsData:json格式的数据对象
* @attr:数据的属性 json格式 两个属性name(属性名称),type(数据类型[int ,float,string,date]为分页提供比较的依据
* @pageSize:每页显示多少笔
* @tableId:要加入的table
* @showTtl:标题 数组(如果要设置列宽传入的数组可以是： "列名:宽度" 的格式，宽度可以使百分比耶可以使像素)
* @tableShowName:table的标题名称
* @isSort: boolean 是否需要排序
*/
function Page(jsonData,attr,pageSize,tableId,showTtl,tableShowName,isSort){
this.data=jsonData;
this.tableId=tableId;
this.pageSize=pageSize;
this.total=jsonData.length;
this.attr=attr;
this.showTtl=showTtl;
this.tableShowName=tableShowName;
this.currPage;
this.table=document.getElementById(this.tableId);
this.totalPage=Math.ceil(this.total/this.pageSize);
this.isSort=isSort; //是否需要排序
this.sortRow; //记录当前排序的列
this.sortDown=true; //记录是升序还是降序 boolean:true表示降序 false表示升序
//下载文件用到的数据
filetitle=showTtl;
filedata=jsonData;
fileattr=attr;
filetotal=jsonData.length;
this.initPage();
}
Page.prototype.initPage=function(){
this.currPage=1;
this.showTitle(this.showTtl);
if(this.total<this.pageSize){//如果总记录数小于每页显示数据
this.showData(1,this.total);
}else{
this.showData(1,this.pageSize);
}
}
/**
*下一页
*/
Page.prototype.nextPage=function(){
if(this.currPage==Math.ceil(this.total/this.pageSize)){//如果是最后页
return false;
}else if(this.currPage==Math.ceil(this.total/this.pageSize)-1){//如果是倒数第二页
this.currPage=this.currPage+1;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.total);
}else{
this.currPage=parseInt(this.currPage)+1;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage);
}
}
/**
*上一页
*/
Page.prototype.prePage=function(){
if(this.currPage==1){//已经是首页
return false;
}else{
this.currPage=parseInt(this.currPage)-1;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage);
}
}
/**
*首页
*/
Page.prototype.first=function(){
if(this.currPage==1){//已经是首页
return false;
}else{
this.currPage=1;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage);
}
}
/**
*最后页
*/
Page.prototype.last=function(){
if(this.currPage==this.totalPage){//已经是最后页
return false;
}else{
this.currPage=this.totalPage;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.total);
}
}
/**
*跳转到多少页
*/
Page.prototype.go=function(){
var goObj=document.getElementById('go');
var index=parseInt(goObj.value);//强制转换为整型
if(!(/^\d+$/.test(index))){
alert('请输入数字!');
goObj.focus();
goObj.value="";
return false;
}
if(index<1||index>this.totalPage){//超出范围
alert('请选择正确的范围!');
goObj.focus();
goObj.value="";
return false;
}
if(index==this.totalPage){//如果是最后页
this.currPage=index;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.total);
}else{
this.currPage=index;
this.showTitle(this.showTtl);
this.showData(this.pageSize*(this.currPage-1)+1,this.pageSize*this.currPage);
}
}
/**
*显示数据
*/
Page.prototype.showData=function(from,to){
var attr=this.attr;//得到属性数组
//生成表格
for(i=0;i<=to-from;i=i+1){
//增加行
var tr=document.createElement("tr");
//增加序号
var td_xh=document.createElement('td');
//td_xh.setAttribute("align","center");
td_xh.align="center";
td_xh.innerHTML=i+1;
tr.appendChild(td_xh);
//增加单元格
for(j=0;j<attr.length;j=j+1){
//增加一个
var td=document.createElement("td");
//td.setAttribute("align","center");
td.align="center";
//设置数据
td.innerHTML=this.data[from-1+i][attr[j].name];
//添加到行里
tr.appendChild(td);
}
//将行添加到table里
this.table.appendChild(tr);
}
var foot=document.getElementById('foot');
var str='<p class="all">共<span>'+this.total+"</span>条记录 ";
str=str+'共<span>'+this.totalPage+'</span>页 ';
str=str+'当前第<span>'+this.currPage+'</span>页</p>';
//设置下载数据
str=str+'<form action="downFeeDetail.action" name="downloadform" target="_blank" method="post">';
str=str+'<input type="hidden" name="contentDisposition" value="'+this.tableShowName+'">';
str=str+'<input type="hidden" name="coulumInfo" value="'+titleToString()+'">';
str=str+'<input type="hidden" name="dataInfo" value="'+dataToString()+'">';
str=str+'<p class="goto">';
//是否显示首页
if(this.currPage==1){
str=str+"首页 ";
}else{
str=str+'<a href="javascript:void(0);" onclick="javascript:page.first()">首页</a> ';
}
//是否显示上一页
if(this.currPage-1<1){
str=str+"上一页 ";
}else{
str=str+'<a href="javascript:void(0);" onclick="javascript:page.prePage()">上一页</a> ';
}
//是否显示下一页
if(this.currPage+1>this.totalPage){
str=str+"下一页 ";
}else{
str=str+'<a href="javascript:void(0);" onclick="javascript:page.nextPage()">下一页</a> ';
}
//是否显示尾页
if(this.currPage==this.totalPage){
str=str+"尾页 ";
}else{
str=str+'<a href="javascript:void(0);" onclick="javascript:page.last()">尾页</a> ';
}
str=str+'<a href="javascript:void(0);" onclick="javascript:page.go()">转至</a>';
str=str+'<input type="text" id="go" size="5" />页 ';
//设置下载数据
str=str+'<select name="contentType" id="select"><option value="excel">转为Excel格式</option><option value="txt">转为Txt格式</option></select> <a href="javaScript:void(0)" onclick="document.downloadform.submit();">下载</a>';
str=str+'</p>';
str=str+'</form>';
foot.innerHTML=str;
}
/**
*显示table名称，标题
*/
Page.prototype.showTitle=function(tabTitle){
var title=new Array();
title=tabTitle;
//删除原来的数据
for(k=this.table.rows.length-1;k>=0;k--){
this.table.deleteRow(k);
}
//创建table名称
var tr_TableName=document.createElement('tr');
var th_TableName=document.createElement('th');
th_TableName.colSpan=this.showTtl.length+1;
th_TableName.innerHTML =this.tableShowName;
tr_TableName.appendChild(th_TableName);
this.table.appendChild(tr_TableName);
//创建标题栏
var tr=document.createElement('tr');
//添加序号
var td_xh=document.createElement('th');
td_xh.innerHTML="序号";
tr.appendChild(td_xh);
var curTitle; //记录当前列名
//创建标题
for(i=0;i<title.length;i=i+1){
//创建栏位
var td=document.createElement('th');
/**
*
*2009年9月11日增加设置列宽和排序的功能
*/
if(title[i].indexOf(':')!=-1){//有设置列宽
td.width=title[i].split(':')[1];
curTitle=title[i].split(':')[0];
}else{ //没有设置列宽
//设置值
curTitle=title[i];
}
if(this.isSort){//需要排序
td.innerHTML="<a href='javascript:void(0);' onclick='page.sort(this);' name='"+this.attr[i].name+"'>"+curTitle+"</a>";
}else{//不需要排序
td.innerHTML=curTitle;
}
//添加到行里
tr.appendChild(td);
}
this.table.appendChild(tr);
}
/**
*
*排序
*/
Page.prototype.sort=function(col){
//得到需要排序的属性
var colName=col.name;
var attr=this.attr;
//alert(this.sortRow==colName);
if(this.sortRow==colName){//如果是当前列
this.data.reverse();
this.sortDown=!this.sortDown;
//从新显示数据
this.initPage();
}else{
this.sortDown=!this.sortDown;
this.sortRow=colName;
//得到当前属性的数据类别
var ty=getType(colName);
this.data.sort(compare(colName,ty));
this.initPage();
}
//得到数据的类型
function getType(col){
var type="";
for(var i in attr){
if(attr[i].name==col){
type=attr[i].type;
}
}
return type;
}
//比较函数
function compare(col,ty){
return function(x,y){
switch (ty.toLowerCase()){
case "int":
return parseInt(eval('x.'+col))<parseInt(eval('y.'+col))?-1:parseInt(eval('x.'+col))>parseInt(eval('y.'+col))?1:0;
case "float":
return parseFloat(eval('x.'+col))<parseFloat(eval('y.'+col))?-1:parseFloat(eval('x.'+col))>parseFloat(eval('y.'+col))?1:0;
case "string":
return (eval('x.'+col)).localeCompare(eval('y.'+col));
case "date":
return eval('x.'+col)<eval('y.'+col)?-1:eval('x.'+col)>eval('y.'+col)?1:0;
}
};
}
}
/**
*将title数组,组织成以tab分隔的字符串
*/
function titleToString(){
var str="序号";
for(i=0;i<filetitle.length;i=i+1){
str=str+"\t"+filetitle[i];
}
return str;
}
/**
*将json,data数组,组织成以tab分隔的字符串
*/
function dataToString(){
var str="";
for(i=0;i<filedata.length;i=i+1){
str=str+(i+1)+"\t";
for(j=0;j<fileattr.length;j=j+1){
str=str+filedata[i][fileattr[j]]+"\t";
}
str =str+"\r\n";
}
str=str+'共'+filetotal+"条记录";
return str;
}
--------------------------------------------------------------------
测试的html:
<html>
<head>
<title>trest</title>
<script type="text/javascript" src="newPage.js"></script>
<script type="text/javascript">
var dataa=[{name:'liyi1',age:'223.3',sex:'男',date:'1997-12-21'},
{name:'liyi2',age:'233.5',sex:'男',date:'1997-12-21'},
{name:'liyi3',age:'243.2',sex:'女',date:'1997-10-29'},
{name:'liyi4',age:'22.3',sex:'女',date:'1997-08-21'},
{name:'liyi5',age:'2.63',sex:'男',date:'1997-08-02'},
{name:'中文',age:'24.3',sex:'男',date:'1994-12-21'},
{name:'liyi7',age:'28.3',sex:'男',date:'1995-12-21'},
{name:'中文测试',age:'5.0',sex:'女',date:'1997-12-21'},
{name:'liyi9',age:'6.7',sex:'男',date:'1897-10-21'},
{name:'liyi0',age:'3',sex:'男',date:'1996-10-21'},
{name:'liyi11',age:'54',sex:'女',date:'1897-10-21'},
{name:'liyi12',age:'5',sex:'男',date:'1992-02-21'},
{name:'sd',age:'32.423',sex:'男',date:'1997-12-23'}
];
var page;
function int(){
// var attr=new Array();
// attr[0]='name';
// attr[1]='age';
// attr[2]='sex';
var attr=[{name:'name',type:'string'},
{name:'age',type:'float'},
{name:'sex',type:'string'},
{name:'date',type:'date'}
];
var showtitle=new Array();
showtitle[0]='姓名:80px';
showtitle[1]='年龄:80px';
showtitle[2]='性别:80px';
showtitle[3]='生日:80px';
page=new Page(dataa,attr,20,'result',showtitle,'',true);
}
</script>
</head>
<body onload='int()'>
<hr>
<table border="1">
<tbody id="result">
</tbody>
</table>
<div id='foot'></div>
<hr>
</body>
</html>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
- 上一篇：ASP中使用三层架构 前言
- 下一篇：合理设定口令降低安全风险
