📄 default2.aspx
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="css/a.css" />
<link href="css/div.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="js/xmlHttp.js"></script>
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<input type = "hidden" id = "num" name = "num" runat="server" /><!--服务器给的总数-->
<input type = "hidden" value = '10' id = "perPage" name = "perPage"/><!---服务器从cookie中读，没有就默认为5-->
<input type="hidden" value = "10" id = "keyword" /><!--关键字，客户端请求时就发过去了 再返回来-->
<input type="hidden" value = "1" id = "curPV" /><!--当前是第几页-->
<input type="hidden" value="" id="ProId" />
<script type="text/javascript">
$(document).ready(function(){
getCustomerInfo($('curPV').value);
})
</script>
<div id="mydiv" align=center>
</div>
<div id="listmsg">
</div>
<div id = "div_list">
<ul>
<li class = "base" id ="previous" style="width:4em"><a href = "javascript:;">上一页</a></li>
<li class = "line" style="width:2em"></li>
<li id = "li1" class = "base cur"><a href = "javascript:;">1</a></li>
<li class = "line" id = "line1"></li><li id = "li2" class = "base"><a href = "javascript:;">2</a></li>
<li class = "line" id = "line2"></li><li id = "li3" class = "base"><a href = "javascript:;">3</a></li>
<li class = "line" id = "line3"></li><li id = "li4" class = "base"><a href = "javascript:;">4</a></li>
<li class = "line" id = "line4"></li><li id = "li5" class = "base"><a href = "javascript:;">5</a></li>
<li class = "line" id = "line5"></li><li id = "li6" class = "base"><a href = "javascript:;">6</a></li>
<li class = "line" id = "line6"></li><li id = "li7" class = "base"><a href = "javascript:;">7</a></li>
<li class = "line" id = "line7"></li><li id = "li8" class = "base"><a href = "javascript:;">8</a></li>
<li class = "line" id = "line8"></li><li id = "li9" class = "base"><a href = "javascript:;">9</a></li>
<li class = "line" id = "line9"></li><li id = "li10" class = "base"><a href = "javascript:;">24</a></li>
<li class = "line" id = "line10" style="width:2em"></li><li id = "next" class = "base" style="width:4em"><a href = "javascript:;">下一页</a></li>
</ul>
</div>
<script type="text/javascript">
function $(elementId) {
return document.getElementById(elementId);
}
var list = {
num:parseInt($('num').value),//定义纪录总数
/**
* 初始化列表，当页面初次载入，改变每页显示记录数的时候，都需要初始化列表
*
* 初始化时，检查每页记录数是否变化，重新计算出最大页数。
* 然后根据最大页数来判断是否将第10个列表项置为最大页数
* 最后初始化列表项的个数，也就是将最大页数传给change函数，详细情况见change函数说明.
*
* @return void
**/
initList:function(){
this.perPage= parseInt($('perPage').value);//感觉将每页显示记录数perPage 存在Cookie中更好
this.maxPage=Math.ceil($('num').value/$('perPage').value);//计算出最大页数，每次初始化都要重新计算
if (this.maxPage>10) $('li10').firstChild.firstChild.nodeValue = this.maxPage;
this.change(this.maxPage);
},
jump:function(page,force){
if (this.num<1) return;//当总记录为0的时候，不许跳
var page = page?parseInt(page):1;//设置默认数1
if (!force&&(page == $('curPV').value||page<1||page>this.maxPage)) return;//点击当前页 页数太小太大为不反应（其实可以设置个变量，点当前页到99次 骂他神经病 grin）
$('curPV').value = page;//设置hidden input 记录当前页数
for (i = 1;i<=Math.min(this.maxPage,10);i++) //初始化所有列表为基础样式
{
$('li'+i).className = 'base';
}
if (this.maxPage<10|| page<5)//最大页数小于10和点最开始几页比较像 合在一起了
{
for (i=1;i<=(this.maxPage<10?this.maxPage:9);i++)//也可以用 <Math.min(this.maxpage+1,10) 第十页始终显示最大页数
{
$('li'+i).firstChild.firstChild.nodeValue = i; //这是页数都比较小的情况下
}
$('li'+page).className = 'base cur';//设置当前页数的颜色
}else if (page + 4>=this.maxPage) //这里就是最后几页了 到了这里之后也就确定最后几页不是前面几页了
{
for (i=this.maxPage,j=10;i>=(this.maxPage-8);i--,j--)//li1 始终显示 第一页
{
$('li'+j).firstChild.firstChild.nodeValue = this.maxPage-10+j;
}
$('li'+(10+page-this.maxPage)).className = 'base cur';
}else{//到这里的时候就说明应该是中心地带了，采取前3后4
for (i=page-3,j=2;i<=(page+4);i++,j++) //中心地带li1 显示第一页，li10显示最后一页
{
$('li'+j).firstChild.firstChild.nodeValue = i;
}
$('li5').className = 'base cur';
}
//向服务器传递参数 ajax的代码大家都有吧，我就不贴出来了
},
reList:function(perPage){
if (perPage == $('perPage').value) return; //点击当前每页显示记录数无效
var gPage = Math.ceil((parseInt($('perPage').value)*(parseInt($('curPV').value)-1)+1)/perPage);//得到新的当前页数
$('perPage').value = perPage;//记录新的每页显示记录数，在我自己的项目里面，我是写到cookie中的
this.initList();//初始化列表
this.jump(gPage,1);//初始化之后进入新的当前页数
},
change:function(newLen){
newLen = Math.min(parseInt(newLen),10);//最大为10
for (i = 1;i<11;i++){
if (i>newLen) {//大于新长度就隐藏 小于就显示
$('li'+i).style.display = 'none';
$('line'+i).style.display = 'none';
}else{
$('li'+i).style.display = 'block';
$('line'+i).style.display = 'block';
}
}
}
};
for (i = 1;i<=10;i++)
{
$('li'+i).onclick = function(){
list.jump(this.firstChild.firstChild.nodeValue);
//alert($('curPV').value);
getCustomerInfo($('curPV').value);
}
}
$('previous').onclick = function(){
list.jump(parseInt($('curPV').value)-1);
getCustomerInfo($('curPV').value);
}
$('next').onclick = function(){
list.jump(parseInt($('curPV').value)+1);
getCustomerInfo($('curPV').value);
}
list.initList();//初始化项目
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -