分页 控制用户点击页数前后显示几页
2020/8/12
今天在公司是接触实现分页，并且控制用户点击页数前后显示几页，分三种情况
end=parseInt(end)
pageIndex=parseInt(pageIndex)
let msg="";
if (pageIndex<=7){
for(let i=1;i<12;i++){
msg+=creaeteA(i)
}
msg+=" ... ";
msg+=creaeteA(end);
// 1 2 3 4 5 6 7...end
}else if(pageIndex>=end-6){
msg+=creaeteA(1)
msg+=" ... ";
for(let i=pageIndex-5;i<=end;i++){
msg+=creaeteA(i)
}
// 1...
}else{
msg+=creaeteA(1)
msg+=" ... ";
for(let i=pageIndex-5;i<pageIndex+6;i++){
msg+=creaeteA(i)
}
msg+=" ... ";
msg+=creaeteA(end)
}
// pageIndex=11
// 1... 6 7 8 9 10 11 12 13 14 15 16...end
并且前后端数据库相连，点击页数就显示相应数据库里分页的内容，前端做界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>界面加分页</title>
<script src="js.js"></script>
<script src="js/jQuery1.11.min.js"></script>
<script type="text/javascript">
let end=200;
let pageSize=10
let pageIndex=1;
let baseurl="http://localhost:8080/web006/StudentServlet"
function loadPaging(){
getCount()
initTable()
document.querySelector("div").innerHTML=createPaging(end,pageIndex)
document.querySelector("a[val='"+pageIndex+"']").className="red"
}
// 在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，
// 如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
function changePaging() {
// 初值是1,把点的页数给它,显示点击页数的内容
pageIndex=event.target.getAttribute('val')
alert(pageIndex)
// 点的是<a>标签才是对应页码内容,其他地方是空
if (pageIndex)
loadPaging(pageIndex)
}
function getCount() {
$.getJSON(baseurl,{"type":"getCount"},function(data){
end=Math.ceil(data.data/pageSize)
})
}
function initTable(){
// url:发送请求地址。// data:待发送 Key/value 参数。// callback:载入成功时回调函数
// (请求成功后做的操作,这里是把数据库两表联查信息显示在页面上)。
$.getJSON(baseurl,{"type":"select","pageIndex":pageIndex,"pageSize":pageSize},function (data){
let msg=""
for(let i=0;i<data.data.length;i++){
msg+="<tr>";
msg+="<td>"+data.data[i].id+"</td>";
msg+="<td>"+data.data[i].name+"</td>";
msg+="<td>"+data.data[i].pwd+"</td>";
msg+="<td>"+data.data[i].cinfo.name+"</td>";
msg+="<td>删除 编辑</td>";
msg+="</tr>";
}
$("tbody").html(msg)
// }else{
// alert(data.msg)
// }
})
}
</script>
<style>
.red{
background-color: red;
}
</style>
</head>
<!--onload 常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS 文件等），就执行一段脚本。 -->
<body onload="loadPaging()">
<table border="1px" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<td>编号</td>
<td>姓名</td>
<td>密码</td>
<td>班级</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div onclick="changePaging()"></div>
</body>
</html>
温故知新：给文本框赋值 value
给标签对赋值innerHTML(在页面显示)
浙公网安备 33010602011771号