自定义分页

来源：互联网发布：python 查数据类型编辑：程序博客网时间：2024/06/05 17:30

<!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 = "第  ";
if(allindex <= 5) {
for(var i = 1; i <= allindex; i++) {
b += "<a href='select.do?currentindex='" + i + "'+'&startindex=" + 1 + "' onclick='changecurrentindex(" + i + ")'>" + i + "</a>  "
}
} else if(allindex > 5) {
if(startindex >= 2) {
b += "...  ";
}
for(var i = startindex; i < (startindex + 5); i++) {
b += "<a href='#' onclick='changecurrentindex(" + i + ")'>" + i + "</a>  "
}
if(startindex + 5 <= allindex) {
b += "...  "
}
}
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" onclick="back()">上一页</button>

<div id="yi"></div>

<button id="xia" onclick="go()">下一页</button>
<div>
当前页数为：<input id="er" style="width: 20px;" onkeypress="if (event.keyCode == 13)changecurrentindex();"></input>
</div>

<div>最大页数为:${sessionSope.allindex}</div>
<form id="form1" name="form1"></form>
</body>

</html>

0 0