原理，前台传入每页显示条数 ，及当前的页码 后台有条件查询 显示到页面上
页面上显示样式为
本例子：是点击查询按钮 获得数据 进行分页的情况 （如 页面已加载就获得数据 只需 初始化时就调用方法即可）
首先是前台
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; 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; } }