自定义分页

灰太狼 2021-06-24 14:37 587阅读 0赞

<!DOCTYPE html>  
<html>  
  
  
<head>  
<meta charset="UTF-8">  
<title></title>  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript">  
//默认都是第一页  
var startindex = 1;  
var currentindex = 1;  
//页面加载时默认的生成页码  
$(function() \{  
var a = $("\#san").val();  
if(a != "" && a != null) \{  
//parseInt()是将字符串形式转化成int类型  
startindex = parseInt(a);  
\}  
var b = $("\#si").val();  
if(b != "" && b != null) \{  
currentindex = parseInt(b);  
\}  
creatyema();  
\})  
//生成页码  
function creatyema() \{  
//获取总共要生成几页  
var allindex = $("\#ying").val();  
//如果当前是第一页那就没有上一页，即上一页是不可按的  
if(currentindex == 1) \{  
$("\#shang").attr("disabled", "disabled");  
\} else if(currentindex == allindex) \{  
//如果当前页是最后一页,那就没有下一页,即下一页是不可按的  
$("\#xia").attr("disabled", "disabled");  
\} else \{  
//如果不是这两种情况，上一页和下一页都是可按的  
$("\#xia").removeAttr("disabled");  
$("\#shang").removeAttr("disabled");  
\}  
//======================动态拼接页码=========================  
//使用的时候应该将\#的地方用url连接来代替，并传入后台两个参数，一个是起始页码，一个是当前页码，返回页面时需要使用  
var b = "第&nbsp;&nbsp;";  
if(allindex <= 5) \{  
for(var i = 1; i <= allindex; i++) \{  
b += "<a href='select.do?currentindex='" + i + "'+'&startindex=" + 1 + "'  οnclick='changecurrentindex(" + i + ")'>" + i + "</a>&nbsp;&nbsp;"  
\}  
\} else if(allindex > 5) \{  
if(startindex >= 2) \{  
b += "...&nbsp;&nbsp;";  
\}  
for(var i = startindex; i < (startindex + 5); i++) \{  
b += "<a href='\#'  οnclick='changecurrentindex(" + i + ")'>" + i + "</a>&nbsp;&nbsp;"  
\}  
if(startindex + 5 <= allindex) \{  
b += "...&nbsp;&nbsp;"  
\}  
\}  
b += "页";  
//把生成的页码放入div中  
$("\#yi").html(b);  
//在控件中显式当前页码  
$("\#er").val(currentindex);  
//自动提交表单查询当前页码的数据  
var form = document.form1;  
//\#的地方用"select.do?currentindex=" + currentindex;其中select.do是url连接，currentindex代表当前页码  
var actionPath = "\#"  
form.action = actionPath;  
form.submit();  
return true;  
\}  
//鼠标点击页码后改变当前页数  
function changecurrentindex(i) \{  
currentindex = i;  
$("\#er").val(currentindex);  
if(currentindex > startindex + 4) \{  
startindex + 1;  
\}  
\}  
//上一页，按上一页后，改变当前页码，并重新生成页码  
function back() \{  
console.info(currentindex);  
currentindex -= 1;  
if(currentindex < startindex) \{  
startindex -= 1  
\}  
console.info(currentindex);  
creatyema();  
\}  
//下一页，按下一页后，改变当前页码，并重新生成页码  
function go() \{  
currentindex += 1;  
if(currentindex > startindex + 4) \{  
startindex += 1  
\}  
creatyema();  
\}  
//输入页数后按下回车就能改变当前页数，并重新生成页码  
function changecurrentindex() \{  
//parseInt()是将字符串形式转化成int类型  
var currentindex1 = parseInt($("\#er").val());  
var allindex = parseInt($("\#ying").val());  
if(currentindex1 > allindex) \{  
alert("请输入大于等于" + 1 + "，并且小于等于" + allindex + "的页码")  
\} else if(currentindex1 + 4 < allindex) \{  
//如果当前页码加上4页小于总页码  
startindex = currentindex1;  
currentindex = currentindex1;;  
creatyema();  
\} else \{  
//如果当前页码加上4页大于总页码，那么起始页码是总页码减4  
startindex = allindex - 4;  
currentindex = currentindex1;  
creatyema();  
\}  
\}  
</script>  
</head>  
  
  
<body>  
  
<input type="hidden" id="ying" value="20" />  
  
<input type="hidden" id="san" value="2" />  
  
<input type="hidden" id="si" value="4" />  
  
<button id="shang" οnclick="back()">上一页</button>  
  
<div id="yi"></div>  
  
<button id="xia" οnclick="go()">下一页</button>  
<div>  
当前页数为：<input id="er" style="width: 20px;" οnkeypress="if (event.keyCode == 13)changecurrentindex();"></input>  
</div>  
  
<div>最大页数为:$\{sessionSope.allindex\}</div>  
<form id="form1" name="form1"></form>  
</body>  
  
  
</html>