Jquery插件实现分页查询
来源:互联网 发布:易语言端口转发 编辑:程序博客网 时间:2024/06/16 04:09
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
阅读全文
1 0
- Jquery插件实现分页查询
- jquery.pagination插件实现分页
- 自定义jQuery插件实现分页
- jQuery插件JQuery Pager分页器实现javascript分页功能
- mybatis实现分页查询(pagehelper插件)
- 自已实现的简单jQuery分页插件
- 使用Jquery.pagination插件实现分页
- php+ajax+jquery插件实现分页
- jquery自定义插件实现分页效果
- jQuery插件 dataTable Ajax分页功能实现
- jQuery DataTables插件自定义Ajax分页实现
- Jquery EaysUI 的datagrid实现查询分页
- jquery.pagination实现分页查询功能
- Asp.Net分页方法:JQuery插件实现Ajax无刷新分页、AspNetPager分页控件实现分页
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
- jQuery 插件-使用jQuery Pagination实现无刷新分页
- mybatis分页查询插件
- jquery分页插件
- Centos下安装matlab
- nodejs根据地址生成二维码并当做水印嵌入图片中
- Mysql学习历程(11)-高级数据操作
- Java中ArrayList和LinkedList区别
- [单纯形+对偶] BZOJ3265: 志愿者招募加强版
- Jquery插件实现分页查询
- 如何在js中用el取值
- MVC --- 创建转义url传递字符串的函数
- js中的this关键字详解
- 【JZOJ5215】【GDOI2018模拟7.9】组合数问题
- Linux基本命令操作介绍(用于新手自学)
- Android单例模式
- iOS 自动化打包的方法
- html参数编码