JavaScript分页.doc

表格分页Demo第一页 上一页 下一页 最后一页 第页/共页function rowResize()if (height.value*1!=height.value | height.value=null)return;for(i=0;itbl.rows.length;i+)tbl.rows0.cells0.style.pixelHeight=height.value;for(i=0;itable4.rows.length;i+)table4.rows0.cells0.style.pixelHeight=height.value;/table4.rows0.cells0.style.pixelWidth=height.value;for(i=0;itable4.cells.length;i+)table4.cellsi.style.pixelWidth=height.value;var onDrag=0,gblResizeObj;function FindPos(obj)var x=obj.offsetLeft, y=obj.offsetTop;while(obj=obj.offsetParent)x += obj.offsetLeft;y += obj.offsetTop;X=x; Y=y;return this;function ColResizeStart()var srcObj=event.srcElement,tblParent=srcObj.parentElement;while(tblParent.tagName!=TABLE)tblParent=tblParent.parentElement;if(srcObj.tagName!=TD)return;if(srcObj.offsetWidth - event.offsetX =3 & srcObj.cellIndex!=srcObj.parentElement.cells.length - 1)gblResizeObj=tblParent.rowssrcObj.parentElement.rowIndex.cellssrcObj.cellIndex;onDrag=1;if(event.offsetX =3 & srcObj.cellIndex != 0)gblResizeObj=tblParent.rowssrcObj.parentElement.rowIndex.cellssrcObj.cellIndex - 1;onDrag=1;function ColResizeIng()var objSrcTd=event.srcElement,tblParent=objSrcTd.parentElement;if(objSrcTd.tagName = TD & (Math.abs(event.offsetX) = 3 | Math.abs(objSrcTd.offsetWidth - event.offsetX)=3) & objSrcTd.cellIndex != 0)objSrcTd.document.body.style.cursor=col-resize;elseobjSrcTd.document.body.style.cursor=default;if(onDrag!=1)return;var trSrc=gblResizeObj.parentElementwhile(tblParent.tagName!=TABLE)tblParent=tblParent.parentElement;if(onDrag=1)var intWidth=0,intPosX=(new FindPos(gblResizeObj).intX;gblResizeObj.style.pixelWidth = event.x - intPosX;function ColResizeEnd()onDrag=0;document.body.style.cursor=default;table4.attachEvent(onmousedown,ColResizeStart);table4.attachEvent(onmousemove,ColResizeIng);table4.attachEvent(onmouseup,ColResizeEnd);tbl.attachEvent(onmousedown,ColResizeStart);tbl.attachEvent(onmousemove,ColResizeIng);tbl.attachEvent(onmouseup,ColResizeEnd); var jsonData = name: 张三1, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四2, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三3, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四4, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三5, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四6, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三7, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四8, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三9, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四10, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三11, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四12, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三13, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四14, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三15, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四16, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1, name: 张三17, position: 1, powerrate: 2, waterrate: 3, healthcosts: 4, watermeter: 5, ammeter: 6, linkman: 7, phone: 8, rental: 9, tenancy: 10, remark: 11 , name: 李四18, position: 11, powerrate: 10, waterrate: 9, healthcosts: 8, watermeter: 7, ammeter: 6, linkman: 5, phone: 4, rental: 3, tenancy: 2, remark: 1; var tb = document.getElementById(table4); /表格标题var x = tb.createCaption()x.innerHTML=表格分页示例/填充表头var row = tb.insertRow(tb.rows.length); var i = 0;for(var key in jsonData0)var c = row.insertCell(i+);c.innerHTML = key; /填充内容for(var i = 0; i jsonData.length; i+) var row = tb.insertRow(tb.rows.length); var j = 0;for(var key in jsonDatai)var c = row.insertCell(j+);c.innerHTML = jsonDatai+ key +; var theTable = document.getElementById(table4);var totalPage = document.getElementById(spanTotalPage);var pageNum = document.getElementById(spanPageNum);var spanPre = document.getElementById(spanPre);var spanNext = document.getElementById(spanNext);var spanFirst = document.getElementById(spanFirst);var spanLast = document.getElementById(spanLast);var numberRowsInTable = theTable.rows.length;var pageSize = 10;var page = 1;/下一页function next() hideTable();theTable.rows0.style.display = ;currentRow = pageSize * page + 1;maxRow = currentRow + pageSize;if ( maxRow numberRowsInTable ) maxRow = numberRowsInTable;for ( var i = currentRow; i numberRowsInTable ) currentRow = numberRowsInTable;for ( var i = maxRow; i currentRow; i+ ) theTable.rowsi.style.display = ; if ( maxRow = 1 ) preText(); firstText(); showPage();nextLink();lastLink();/第一页function first() hideTable();page = 1;theTable.rows0.style.display = ;for ( var i = 1; ipageSize + 1; i+ ) theTable.rowsi.style.display = ;showPage();preText();nextLink();lastLink();/最后一页function last() hideTable();page = pageCount();theTable.rows0.style.display = ;currentRow = pageSize * (page - 1) + 1;for ( var i = currentRow; inumberRowsInTable; i+ ) theTable.rowsi.style.display = ;showPage();preLink();nextText();firstLink();function hideTable() for ( var i = 0; inumberRowsInTable; i+ ) theTable.rowsi.style.display = none;function showPage() pageNum.in