Jquery插件实现分页查询

1.场景分析

    近期在项目中很多地方都用到了分页查询，今天笔者就前端的Jquery插件实现分页详细地跟大家讲解下，希望能帮助到需要的各位！

2.实现方案

①page.css样式代码

.page{
list-style: none;
}
.page>li{
float: left;
padding: 5px 10px;
cursor: pointer;
}
.page .pageItem{
border: solid thin #DDDDDD;
margin: 5px;
}
.page .pageItemActive{
border: solid thin #0099FF;
margin: 5px;
background-color: #0099FF;
color:white;
}
.page .pageItem:hover{
border: solid thin #0099FF;
background-color: #0099FF;
color:white;
}
.page .pageItemDisable{
border: solid thin #DDDDDD;
margin: 5px;
background-color: #DDDDDD;
}

②page.js动效代码

/**
* Created by zhangxing on 2017/4/26.
*/

var  page = {
"pageId":"",
"data":null,
"maxshowpageitem":5,//最多显示的页码个数
"pagelistcount":10,//每一页显示的内容条数
"init":function(listCount,currentPage,options){
this.data=options.data,
this.pageId=options.id,
this.maxshowpageitem=options.maxshowpageitem,//最多显示的页码个数
this.pagelistcount=options.pagelistcount//每一页显示的内容条数
page.initPage(listCount,currentPage);
},
/**
* 初始化数据处理
* @param listCount 列表总量
* @param currentPage 当前页
*/
"initPage":function(listCount,currentPage){
var maxshowpageitem = page.maxshowpageitem;
if(maxshowpageitem!=null&&maxshowpageitem>0&&maxshowpageitem!=""){
page.maxshowpageitem = maxshowpageitem;
}
var pagelistcount = page.pagelistcount;
if(pagelistcount!=null&&pagelistcount>0&&pagelistcount!=""){
page.pagelistcount = pagelistcount;
}
page.pagelistcount=pagelistcount;
if(listCount<0){
listCount = 0;
}
if(currentPage<=0){
currentPage=1;
}

page.setPageListCount(listCount,currentPage);
},
/**
* 初始化分页界面
* @param listCount 列表总量
*/
"initWithUl":function(listCount,currentPage){
var pageCount = 1;
if(listCount>=0){
var pageCount = listCount%page.pagelistcount>0?parseInt(listCount/page.pagelistcount)+1:parseInt(listCount/page.pagelistcount);
}
var appendStr = page.getPageListModel(pageCount,currentPage);
$("#"+page.pageId).html(appendStr);
},
/**
* 设置列表总量和当前页码
* @param listCount 列表总量
* @param currentPage 当前页码
*/
"setPageListCount":function(listCount,currentPage){
listCount = parseInt(listCount);
currentPage = parseInt(currentPage);
page.initWithUl(listCount,currentPage);
page.initPageEvent(listCount);
page.viewPage(currentPage,listCount,page.pagelistcount,page.data)
//      fun(currentPage);
},
//页面显示功能
"viewPage":function (currentPage,listCount,pagelistcount,data){
var NUM=listCount%pagelistcount==0?listCount/pagelistcount:parseInt(listCount/pagelistcount)+1;
if(currentPage==NUM){
var result=data.slice((currentPage-1)* pagelistcount,data.length);
}
else{
var result=data.slice((currentPage-1)*pagelistcount,(currentPage-1)*pagelistcount+pagelistcount);
}
options.callBack(result);
},
"initPageEvent":function(listCount){
$("#"+page.pageId +">li[class='pageItem']").on("click",function(){
page.setPageListCount(listCount,$(this).attr("page-data"),page.fun);
});
},
"getPageListModel":function(pageCount,currentPage){
var prePage = currentPage-1;
var nextPage = currentPage+1;
var prePageClass ="pageItem";
var nextPageClass = "pageItem";
if(prePage<=0){
prePageClass="pageItemDisable";
}
if(nextPage>pageCount){
nextPageClass="pageItemDisable";
}
var appendStr ="";
appendStr+="<li class='"+prePageClass+"' page-data='1' page-rel='firstpage'>首页</li>";
appendStr+="<li class='"+prePageClass+"' page-data='"+prePage+"' page-rel='prepage'><上一页</li>";
var miniPageNumber = 1;
if(currentPage-parseInt(page.maxshowpageitem/2)>0&¤tPage+parseInt(page.maxshowpageitem/2)<=pageCount){
miniPageNumber = currentPage-parseInt(page.maxshowpageitem/2);
}else if(currentPage-parseInt(page.maxshowpageitem/2)>0&¤tPage+parseInt(page.maxshowpageitem/2)>pageCount){
miniPageNumber = pageCount-page.maxshowpageitem+1;
if(miniPageNumber<=0){
miniPageNumber=1;
}
}
var showPageNum = parseInt(page.maxshowpageitem);
if(pageCount<showPageNum){
showPageNum = pageCount;
}
for(var i=0;i<showPageNum;i++){
var pageNumber = miniPageNumber++;
var itemPageClass = "pageItem";
if(pageNumber==currentPage){
itemPageClass = "pageItemActive";
}

appendStr+="<li class='"+itemPageClass+"' page-data='"+pageNumber+"' page-rel='itempage'>"+pageNumber+"</li>";
}
appendStr+="<li class='"+nextPageClass+"' page-data='"+nextPage+"' page-rel='nextpage'>下一页></li>";
appendStr+="<li class='"+nextPageClass+"' page-data='"+pageCount+"' page-rel='lastpage'>尾页</li>";
return appendStr;

}
}

③主页面query.html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<link rel="stylesheet" href="css/gongchang-style.css" />
<link href="css/page.css" type="text/css" rel="stylesheet"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/jQuery.js"></script>
<script src="js/echarts.js"></script>

</head>
<body onload="initdata()">
<div>

<div class="grid-wrap">
<div>
<input type="text" id="nicheng" placeholder="搜索">
<input type="button" onclick="search()" value="搜索">

</div>
<div class="grid"  id="grid1">
<div class="grid-header" id="grid1">
<span class="row-1">姓名</span>
<span class="row-1">年龄</span>
<span class="row-1">性别</span>
<span class="row-1">手机号码</span>
<span class="row-1">居住地址</span>
</div>
<div class="grid-body">
<!-- <div class="grid-item">
<span class="row-1">zhangxing</span>
<span class="row-1">24</span>
<span class="row-1">男</span>
<span class="row-1">18772351259</span>
<span class="row-1">浙江西湖</span>
</div>

<div class="grid-item">
<span class="row-1">lisishan</span>
<span class="row-1">23</span>
<span class="row-1">女</span>
<span class="row-1">17682317584</span>
<span class="row-1">浙江余杭</span>
</div> -->

</div>
</div>

</div>
<!--分页插件-->
<div class="page" id="page"></div>

</div>

<script type="text/javascript">

var options;

/**初始函数
* [initdata description]
* @return {[type]} [description]
*/
function initdata(){

alert("进来了");
$.ajax({
type: "get",
url: "http://localhost:8080/userInfo/getUserInfo",
success: function(data, textStatus){
alert(data.userInfoList[1].username);
if(data.status == 1){
var datas = data.userInfoList;
alert(datas);
options={
"id":"page",//显示页码的元素
"data":datas,//显示数据
"maxshowpageitem":5,//最多显示的页码个数
"pagelistcount":3,//每页显示数据个数
"callBack":function(result){
alert(result);
var cHtml="";
for(var i=0;i<result.length;i++){
cHtml+='<div class="grid-item">\
<span class="row-1">'+result[i].username+'</span>\
<span class="row-1">'+result[i].age+'</span>\
<span class="row-1">'+result[i].sex+'</span>\
<span class="row-1">'+result[i].phone+'</span>\
<span class="row-1">'+result[i].address+'</span>\
</div>'

}
$(".grid-body").html(cHtml);
}
};
page.init(datas.length,1,options);

}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){
alert("请求网络失败！。。。。。。");
}
});
}

/**模糊搜索
* [search description]
* @return {[type]} [description]
*/
function search(){
var nicheng =document.getElementById("nicheng").value;
$('.grid-item').remove();

$.ajax({
type: "get",
url: "http://localhost:8080/userInfo/getUserInfoByName?username="+nicheng,
success: function(data, textStatus){
if(data.status == 1){
var addHtml = "";
var result = data.userlist;
for (var j =0;j<data.userlist.length;j++) {

addHtml+='<div class="grid-item">\
<span class="row-1">'+result[j].username+'</span>\
<span class="row-1">'+result[j].age+'</span>\
<span class="row-1">'+result[j].sex+'</span>\
<span class="row-1">'+result[j].phone+'</span>\
<span class="row-1">'+result[j].address+'</span>\
</div>'

}
$(".grid-body").html(addHtml);
}

},
complete: function(XMLHttpRequest, textStatus){

},
error: function(){
alert("请求网络失败！。。。。。。");
}
});
}

</script>
</body>
</html>

其中这里涉及到前端的动态数据渲染，这里需要大家细细咀嚼，方能领悟其中的精髓！

前端主要分页代码：

var options={
"id":"page",//显示页码的元素
"data":datas,//显示数据
"maxshowpageitem":5,//最多显示的页码个数
"pagelistcount":4,//每页显示数据个数
"callBack":function(result){
var cHtml="";
for(var i=0;i<result.length;i++){
cHtml+="<li>"+ result[i].name+"</li>";//处理数据
}
$("#demoContent").html(cHtml);//将数据增加到页面中
}
};
page.init(datas.length,1,options);

按照上述样式进行集成即可；

其中还囊括了一个模糊查询，笔者前篇博文（链接：http://blog.csdn.net/zhangxing52077/article/details/73744779）已经深刻剖析，于此不赘述！ 

④后台controller

@RequestMapping(value = "/getUserInfo", produces = "application/json;charset=utf-8")
public Map<String,Object> getUserInfo(HttpServletResponse response ,
@RequestParam(required=false,defaultValue="1") Integer pageNum,
@RequestParam(required=false,defaultValue="3") Integer pageSize){
response.setHeader("Access-Control-Allow-Origin","*");
List<UserInfo> userList = userInfoService.getUserInfo();
Map<String,Object> map = new HashMap<>();
map.put("userInfoList",userList);
map.put("status",1);
return map;
}

 ⑤ 后台请求的接口返回全部的json数据（也就是Jquery插件恰好需要的datas数据）

3.测试

效果图：

第1页数据：



第二页数据：



模糊查询：



好了，今天的Jquery分页插件就点到为止了，需要源码的及时私信我！我是张星，欢迎加入博主技术交流群，群号：313145288