Ajax分页已经封装完成 简单快捷使用[可遍历部分属性]
本帖最后由 猖良侠 于 2019-11-1 14:21 编辑最近写web项目 分页写起来 非常不舒服又不想用jsp
就自己搞了一个封装好的Ajax分页 代码直接拿起来就可以用
修改自己的请求地址
注*样式需要导入bootstrap样式会好看一点
好用的话
爱心+++++++++++++++++++++++++++++++++++++
分页查询链接 返回的是一个总数目的int 值在数据库查总条数就可以了
单页数据查询返回的是一个json格式的数组
Ajax代码 注*需要导入jquery jar包
var page=1;
var pageend=0;
/**
*
* 每页条目数量pagecount
*
*/
var pagecount=5;
/**
*
* headnames分页标题名称按照顺序书写
*
*/
var headnames=new Array("id","用户名","where are you from")
/**
*
* notlookattr不需要遍历的对象属性
*
*/
var notlookattr=new Array("pwd")
/**
*
* Numberhref分页查询 链接
*
*/
var Numberhref="/user/selectPzd";
/**
*
* limithref单页数据查询 链接
*
*/
var limithref="/user/selectPzdLimit";
/**
*
* 刷新分页方法********************* flseh()*******
*
*/
var pagechange=1;
functionpageTurn(data){
console.log(data)
if(data=="?"){
if(page!=1){
page=page-1;
flseh();
}
}else if(data=="?"){
if(page!=pageend){
page=parseInt(page)+1;
flseh();
}
}else if(data=="..."){
var endli=$("#pages li").slice($("#pages li").length-4,$("#pages li").length-3);
pagechange=endli.text();
page=pagechange;
flseh()
}else if(data=="."){
var endli=$("#pages li").slice(2,3);
if(endli.text()!=1){
pagechange=parseInt(endli.text())-10;
page=pagechange;
}
flseh()
}else{
page=parseInt(data);
flseh();
}
}
function flseh(){
$.post(Numberhref,function (data) {
$("#pages li").remove();
pageend=data/pagecount;
$("#pages").append('<li><a href="#">«</a></li>')
$("#pages").append('<li><a href="#">.</a></li>')
for (var i=pagechange;i<data/pagecount+1;i++){
$("#pages").append('<li><a href="#">'+i+'</a></li>')
if(i-pagechange>10){
$("#pages").append('<li><a href="#">...</a></li>')
break;
}
}
$("#pages").append('<li><a href="#">»</a></li>')
})
$(".usershead td").remove();
for (var i = 0; i <headnames.length ; i++) {
$(".usershead").append('<td>'+ headnames+'</td>')
}
$.post(limithref,{begin:(page-1)*pagecount,end:pagecount},function (data) {
$("#users tr").remove();
for (var i=0;i<pagecount;i++){
$("#users").append('<tr id="'+i+'pagerow"></tr>')
Object.getOwnPropertyNames(data).forEach(function (key) {
var notlookboo=true;
for(var j=0;j<notlookattr.length;j++){
if(key==notlookattr){
notlookboo=false;
}
}
if(notlookboo){
$("tr").append(('<td>' + data+ '</td>'))
}
})
}
})
}
html代码 注*样式需要导入bootstrap样式会好看一点
<table class="table table-hover">
<thead>
<tr class="usershead"></tr>
</thead>
<tbody id="users">
</tbody>
</table>
<ul class="pagination" id="pages">
</ul>
11月1日 更新了一下现在可以通过 notlookattr数组来删除不需要遍历的对象属性了 支持楼主{:1_893:} 学习下！！！ 学习一下，啥都不太会 前端要是做数据分页的话只能一页一页的写吗？ 直接vue一梭子解决，让视图和数据分离，到时候出问题好调试 Mr.Lih 发表于 2019-10-31 20:32
前端要是做数据分页的话只能一页一页的写吗？
没懂你的问题 你可以问的具体点 猖良侠 发表于 2019-10-31 22:56
没懂你的问题 你可以问的具体点
比如有很多数据,需要做分页,,一页一页的那种,,这样的话,前端是不是得写好几个页面? Mr.Lih 发表于 2019-11-1 09:33
比如有很多数据,需要做分页,,一页一页的那种,,这样的话,前端是不是得写好几个页面?
不用的 Ajax 查询只需要一个信息显示页查询哪一页的数据就显示哪一页就可以了只需要一个页面
页:
[1]