1. 效果图;
2. 页面需要引入的js和css样式:
3. 页面显示区域需要写入的div格式:
<!--动态分页案例 -->
<div>
<!--分页显示数据区域 -->
<div class="tbbox" >
<table class="table table-striped tableset" id = "queryPageTable">
<thead style="text-align: center;">
<tr class="trcenter">
<th>用户id</th>
<th>用户姓名</th>
<th>用户性别</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- 分页导航栏 -->
<div id="pagecount" class="fy" style="padding-bottom: 10px;text-align: right;"></div>
</div>
</div>
Ps:这部分div请直接粘贴,保证图中表格的id = "queryPageTable"和分页导航栏的id="pagecount"保持一致。
Ps:这部分请自行填写自己需要显示的表格头内容;
4. js调用部分说明:
Ps:这里说明一下recordArray[]里需要添加的内容:
我们后台传回的数据格式为:
|
在rows的对象里有id,name,sex 3个页面需要显示的属性,所以对应的recordArray[]里需要添加相应的属性保持对应关系,页面才可以对应的显示。
5 .后台Contrller层取参及返回:
Ps:从request里取得相应的页面params{}传过来的参数。调用service层返回结果,返回json字符串或者PageMessage类皆可。
6.js代码:
/**
* hh 20170407
* 封装js分页方法
* html页面直接调用getData(pageIndex,url,recordArray,params)方法即可
* 返回成功的数据形式类似为:
* {"pageIndex":2,"pageSize":3,"total":300",rows":[{"id":"4","name":"name4","sex":"sex4"},{"id":"5","name":"name5","sex":"sex5"},{"id":"6","name":"name6","sex":"sex6"}]}
*
* 关于ajax传入参数的说明:
* data: params 这里可以另外传入pageSize属性 也可以不传直接使用后台定义的
*/
var curPage = 1; //当前页码
var total,pageSize,totalPage; //总记录数,每页显示数,总页数
var url = ""; //传入的url
var params = {};//传入的参数
//考虑将分页显示的tableID写死 以后有变化可以放开
//var tableId ="queryPageTable" ; //table表的id
var recordArray = []; //table表显示的参数
//使用前先清空全局变量
function clearParams(){
recordArray.length = 0; //使用当前页面时清空列数据 ,因为这个数组是全局变量,防止其他页面调用次方法时出现脏数据 ;
url = "";
params = {};
//console.info(params);
}
//获取数据
function getData(pageIndex,url,recordArray,params){
params["pageIndex"] = pageIndex;
$.ajax({
type: 'post',
url: url,
data:params,//{'pageIndex':pageIndex},
dataType:'json',
beforeSend:function(){
//执行操作之前的操作
},
success:function(json){
$("#queryPageTable tbody").empty();//清空数据区
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = json.pageIndex; //当前页
totalPage =
((total % pageSize) != 0) ? (total/pageSize + 1) : (total/pageSize); //总页数
var list = json.rows;
$.each(list,function(index,array){ //遍历json数据列
/*$(".investApplyTbss").append("<tr><td>" + array['id']+ "</td>"
+"<td>"+ array['name']+"</td>"
+"<td>" + array['sex'] +"</td></tr>"
);*/
//改为传入数组动态获取
var trContent="<tr>";
for(var item in recordArray){
trContent+=("<td>"+array[recordArray[item]]+"</td>");
}
trContent+="</tr>";
$("#queryPageTable tbody").append(trContent);
});
},
complete:function(){ //生成分页条
getPageBar();
funPage();
},
error:function(){
alert("数据加载失败");
}
});
}
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span style='float:left'>共"
+total+"条 </span><span style='float:left'> "+curPage
+"/"+totalPage+"</span>";
//如果是第一页
if(curPage==1){
pageStr += "<span data-page-target='first'>首页</span>"
+"<span data-page-target='prev'>上一页</span>";
}else{
pageStr += "<a href='javascript:void(0)' rel='1' data-page-target='first'>首页</a>"
+"<a href='javascript:void(0)' rel='"+(curPage-1)+"' data-page-target='prev'>上一页</a>";
}
//如果是最后页
if(curPage>=totalPage){
pageStr += "<span data-page-target='next'>下一页</span>"
+"<span data-page-target='last'>尾 页</span>";
}else{
pageStr += "<a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"' data-page-target='next'>下一页</a>"
+"<a href='javascript:void(0)' rel='"+totalPage+"' data-page-target='last'>尾 页</a>";
}
pageStr+="跳转到<input type='text' value='' style='width:50px;' class='w50' id='pagesNum'/>"
+"<button value='go' style='cursor:pointer;' οnclick='goPages()'>go</button>"
+"</div>";
$("#pagecount").html(pageStr);
}
//点击触发ajax事件
function funPage(){
$("#pagecount a").on('click',function(){
var rel = $(this).attr("rel");
// alert(rel);
if(rel){
getData(rel,url,recordArray,params);
}
});
}
//跳转页面
function goPages(){
var val = $("#pagesNum").val();
if(isNaN(val)){
alert("请输入正确的数字");
return;
}else{
if(val>totalPage){
alert("超出最大页数");
return;
}else if(val<1){
alert("小于最小页数");
return;
}else{
getData(val,url,recordArray,params);
};
}
}
页面调用示例:
<script type="text/javascript">
$(function(){
//1.清空相对应的全局变量
clearParams();
//2.需要传入的url
url = "/lfiom-cpic-web/pageTest/pages";
//3.拼装json数据返回的列值,取值时用到
recordArray.push("id");
recordArray.push("name");
recordArray.push("sex");
//4.拼装需要传入的参数
params["pageSize"] = 3;//这个可以使用后天自定义的页条数
params["name"] = "1221";//传入相关的查询条件
//初始第一页,并在相对应的div中显示
getData(1,url,recordArray,params);
});
也就实现了基本的上一页,下一页,跳转页等功能,我是个菜鸟,写的不好,仅供参考