关于Java 后台分页
原理,前台传入每页显示条数 ,及当前的页码 后台有条件查询 显示到页面上
页面上显示样式为
本例子:是点击查询按钮 获得数据 进行分页的情况 (如 页面已加载就获得数据 只需 初始化时就调用方法即可)
首先是前台
jsp 页面用于显示分页的结构
<ul class="page" maxshowpageitem="6" pagelistcount="10" id="page"></ul>
<div name="findBtn" type="find" caption="查询" onclick="queryGXLXMCData()" class="btn btn-default">查询按钮</div>
jsp 页面需引入
<link href="page.css" type="text/css" rel="stylesheet" /> <script language='javascript' type='text/javascript' src="page.js"></script>
js:
/** * 点击查询按钮 查询列表数据 */ function queryGXLXMCData2(pageIndex,callSucFlag){ var sub = new WingsSubmit(); //设置分页数据 if(!pageIndex) { pageIndex = 1; } sub.pushData("pageIndex", pageIndex);//当前是第几页 sub.pushData("pageNumber", 10);//每页10条数据 sub.setCtrl('GxfxCtrl_queryGxmcList'); if(callSucFlag) { sub.setFunction("onSuccess", "loadQueryDataSuccess();"); } sub.submit(); } function queryGXLXMCData(pageIndex){ var sub = new WingsSubmit(); sub.pushData("gxmcs", ywcjcode); //设置分页数据 if(!pageIndex) { pageIndex = 1; } sub.pushData("pageIndex", pageIndex);//当前是第几页 sub.pushData("pageNumber", 10);//每页10条数据 sub.setCtrl('GxfxCtrl_queryGxmcList'); sub.setFunction("onSuccess", "loadQueryDataSuccess();"); sub.submit(); }
function loadQueryDataSuccess(res) { $('#cxgxGrid').show(); var dataNumber = res.getAttr("pageCount"); $("#page").show(); setPage(dataNumber); } //设置分页 function setPage(pageCount) { pageNumber = $("#page").attr("pagelistcount"); $("#page").initPage(pageCount,1,function(p) { queryGXLXMCData2(p); }); }
ctrl:
//分页 查询数据的一共的条数------------------------------------------------------ final Map<String, Object> pageMap = (Map<String, Object>) SwordServiceUtils.callService("SWZJ.DSJYPT.GXYT005.GETDATAMAXNUMBER", map); final int dataNumInt = Integer.parseInt(pageMap.get("maxnum")+""); //分页 查询当前请求的数据------------------------------------------------------
final List<Map<String, Object>> cxgxAllList = (List<Map<String, Object>>) SwordServiceUtils .callService("SWZJ.DSJYPT.GXYT005.QUERGXCXALLDATA", map);
res.addTable("cxgxGrid", cxgxAllList);
res.addAttr("pageCount", dataNumInt);
return res;
后台:
DAO:
//查询一共多少条数据 用于分页 sql: "select COUNT(*) maxNum from mx_gxyt_fxdpzb b,mx_gxyt_gxlxdm m where b.gxlx_dm=m.gxlx_dm and b.ywcj_dm = ?"
public Map<String, Object> getAllDataCount(Map<String, Object> map) throws SwordBaseCheckedException { final SQLParam param = new SQLParam(); final String gxmcs = (String) map.get("gxmcs"); if (CastUtils.isNull(gxmcs)) { param.addParam(gxmcs); } else { param.addParam(gxmcs); } final Map<String, Object> listResulMap = SwordPersistenceUtils.getPersistenceService().queryMapByKey("hdxt_dsjypt_gxyt000031_glfxsballgxcount", param); if (CastUtils.isNull(listResulMap)) { final Map<String, Object> resultNum = new HashMap<String, Object>(); resultNum.put("maxnum", 0); return resultNum; } return listResulMap; }
//用于查询每页数据 sql:select m.gxlx_dm,m.gxlxmc,c.gxlxmc as glgxlx ,b.fxd,c.gxlx_dm as sjgxdm from mx_gxyt_gxlxdm m left join mx_gxyt_gxlxdm c
on m.sjgxlx_dm = c.gxlx_dm left join mx_gxyt_fxdpzb b on b.gxlx_dm=m.gxlx_dm where b.ywcj_dm=? and b.fxd>0 LIMIT ?,?
public List<Map<String, Object>> queryCxgxAllList(Map<String, Object> map) throws SwordBaseCheckedException { final SQLParam param = new SQLParam(); final String gxmcs = (String) map.get("gxmcs"); if (CastUtils.isNull(gxmcs)) { param.addParam(gxmcs); } else { param.addParam(gxmcs); } final String pageIndex = map.get("pageIndex") + ""; final String pageNumber = map.get("pageNum") + ""; param.addParam((Integer.parseInt(pageIndex) - 1) * Integer.parseInt(pageNumber)); param.addParam(Integer.parseInt(pageIndex) * Integer.parseInt(pageNumber)); List<Map<String, Object>> result = this.getPersistenceService().queryMapListByKey("hdxt_dsjypt_gxyt000032_glfxsballgxpage", param); result = getLastListMap(result, Integer.parseInt(pageNumber)); return result; } //获取list的最后10条数据 private List<Map<String, Object>> getLastListMap(List<Map<String, Object>> list, int sizeNum) { final int curSize = list.size(); if (curSize < sizeNum) { return list; } final List<Map<String, Object>> reList = new ArrayList<Map<String, Object>>(); for (int i = 0; i < sizeNum; i++) { reList.add(list.get(curSize - sizeNum + i)); } return reList; }
page.css
.zzsc{ margin:0 auto; width:580px; height:80px; border:1px solid #F00} .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 zxm on 2017/3/31. */ $.fn.extend({ "initPage":function(listCount,currentPage,fun){ var maxshowpageitem = $(this).attr("maxshowpageitem"); if(maxshowpageitem!=null&&maxshowpageitem>0&&maxshowpageitem!=""){ page.maxshowpageitem = maxshowpageitem; } var pagelistcount = $(this).attr("pagelistcount"); if(pagelistcount!=null&&pagelistcount>0&&pagelistcount!=""){ page.pagelistcount = pagelistcount; } var pageId = $(this).attr("id"); page.pageId=pageId; if(listCount<0){ listCount = 0; } if(currentPage<=0){ currentPage=1; } page.setPageListCount(listCount,currentPage,fun); } }); var page = { "pageId":"", "maxshowpageitem":5,//最多显示的页码个数 "pagelistcount":10,//每一页显示的内容条数 /** * 初始化分页界面 * @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,fun){ listCount = parseInt(listCount); currentPage = parseInt(currentPage); page.initWithUl(listCount,currentPage); page.initPageEvent(listCount,fun); fun(currentPage); }, "initPageEvent":function(listCount,fun){ $("#"+page.pageId +">li[class='pageItem']").on("click",function(){ page.setPageListCount(listCount,$(this).attr("page-data"),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; } }