Javascript表格翻页效果的具体实现

Javascript表格翻页效果的具体实现_javascript技巧

表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现。

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>表格翻页---www.jb51.net</TITLE>
<style>
body, td{
font-size: 9pt;
}
a:link {
color: #FF0000;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #006600;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var record = 4;//每页显示多少条记录
var count = 24;//记录总数
var pageTotal = ((count+record-1)/record)|0;//总页数
var pagenum = 1;//将要显示的页码

Cookie = {
Set : function (){
var name = arguments[0], value = escape(arguments[1]), days = 365, path = "/";
if(arguments.length > 2) days = arguments[2];
if(arguments.length > 3) path = arguments[3];
with(new Date()){
setDate(getDate()+days);
days=toUTCString();
}
document.cookie = "{0}={1};expires={2};path={3}".format(name, value, days, path);
},
Get : function (){
var returnValue=document.cookie.match(new RegExp("[\b\^;]?" + arguments[0] + "=([^;]*)(?=;|\b|$)","i"));
return returnValue?unescape(returnValue[1]):returnValue;
}
}
String.prototype.format = function(){
var tmpStr = this;
var iLen = arguments.length;
for(var i=0;i<iLen;i++){
tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
}
return tmpStr;
}
function setPagenum(){//整理Cookie
pagenum = Cookie.Get("pagenum");
if(pagenum=="" || pagenum<1){
pagenum=1;
}
}

setPagenum();

//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数
coordinatePagenum(pagenum);

//根据当前要显示的页码取得当前面里第一条记录的号码
var pageBegin = (record*(pagenum-1)+1)|0;

//根据当前要显示的页码取得当前面里最后一条记录的号码
var pageEnd = record*pagenum;

//根据当前要显示的页码取得当前面里最后一条记录的号码
pageEnd = record*pagenum;
for(var i=1;i<=count;i++){
if(i>=pageBegin && i<=pageEnd){
mytable.rows[i].style.display="";
}else{
mytable.rows[i].style.display="none";
}
}
Cookie.Set("pagenum", pagenum);
}

function firstPage(){
pagenum=1;
showhiddenRecord(pagenum);
}

function lastPage(){
showhiddenRecord(pageTotal);
}

//重新整理当前页码，如果页面小于1，则赋值为1，如果大于总页数，则等于总页数
function coordinatePagenum(num){
if(num<1){
num="1";
}else if(num>pageTotal){
num=pageTotal;
}
}

function prePage(){
pagenum--;
coordinatePagenum(pagenum);
showhiddenRecord(pagenum);
}

function nextPage(){
pagenum++;
coordinatePagenum(pagenum);
showhiddenRecord(pagenum);
}

function gotoPage(num){
coordinatePagenum(pagenum);
showhiddenRecord(num);
}
//-->
</SCRIPT>
</HEAD>

时间： 2024-09-14 11:00:28

Javascript表格翻页效果的具体实现_javascript技巧

Javascript表格翻页效果的具体实现_javascript技巧的相关文章

Javascript表格翻页效果实现思路及代码_javascript技巧

不错的Javascript表格翻页效果_javascript技巧

Javascript实现跑马灯效果的简单实例_javascript技巧

基于JavaScript实现瀑布流效果(循环渐近)_javascript技巧

JavaScript 封装一个tab效果源码分享_javascript技巧

javascript 表格内容排序简单操作示例代码_javascript技巧

javascript之textarea打字机效果提示代码推荐_javascript技巧

ajax翻页效果模仿yii框架自己写的

表格翻页问题，求赐教