自定义标签和include来实现分页

背景：之前关于分页用的是<%@include file="" %>来包含分页的相关数据，来公司后才发现也可以用自定义标签来实现分页

include来添加分页

需要添加PageObject对象包含以下信息传入到前台

        /**当前页*/
private Integer pageCurrent;
/**起始记录数*/
private Integer startIndex;
/**总记录数*/
private Integer rowCount;
/**总页数*/
private Integer pageCount;
/**页面大小(每页最多显示多少条数据)*/
private Integer pageSize;

jsp页面头部添加对应的js，再在相关位置添加分页的jsp

<script type="text/javascript" src="${basePath}/ttms/common/page.js"></script>

<%@include file="../common/page.jsp" %>

下面是page.jsp。用于页面展示

---------------------------------------------------------------------------------------

<%@ page  contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>
<span id="pageId">
<a class="first">首页</a>
<a class="pre">上一页</a>&nbsp;
<a class="next">下一页</a>
<a class="last">尾页</a>
<a class="pageCount">总页数(1)</a>
<a class="pageCurrent">当前页(1)</a>

</span>

---------------------------------------------------------------------------------------

下面是page.js。用于点击事件

---------------------------------------------------------------------------------------

/*设置分页信息

 * Pagination(表示分页)
 */
$(document).ready(function(){
  $("#pageId")
  .on("click",".pre,.next,.first,.last",jumpToPage)
});
function setPagination(pageObject){
//1.初始化页面总页数
//1.1首先获得pageCount类选择器代表的对象
//1.2在对象内部写入总页数
$(".pageCount")
    .html("总页数("+pageObject.pageCount+")");
//2.初始化页面当前页
$(".pageCurrent")
.html("当前页("+pageObject.pageCurrent+")");
//2.数据绑定(当前页,总页数),就是将一个数据
//绑定到对应的对象上
$("#pageId")
.data("pageCurrent",pageObject.pageCurrent);
$("#pageId")
.data("pageCount",pageObject.pageCount);
}
function jumpToPage(){
//1.需要获得当前页
var pageCurrent=$("#pageId").data("pageCurrent");
//2.需要获得总页数
var pageCount=$("#pageId").data("pageCount");
//3.获得点击的对象上的类选择器
var clazz=$(this).attr("class")
//4.执行分页查询
//4.1点击next要跳转到下一页
if(clazz=="next"&&pageCurrent<pageCount){
pageCurrent++;
}
//4.2点击pre要跳转到上一页
if(clazz=="pre"&&pageCurrent>1){
pageCurrent--;
}
//4.3点击首页first要跳转到首页
if(clazz=="first"){
pageCurrent=1;
}
//4.4点击尾页last要跳转到尾页
if(clazz=="last"){
pageCurrent=pageCount;
}
//重新绑定pageCurrent的值(当前页的值)
$("#pageId").data("pageCurrent",pageCurrent);
//重新执行查询
doGetObjects();
}

---------------------------------------------------------------------------------------

原理：页面加载时调用doGetObjects()函数去后台获取数据，返回一个map，map中包含一个list和一个PageObject

list存放数据用于展示在页面，PageObject存放分页信息用于分页页面

查询的时候用的是分页查询，每次点击的时候再去根据PageObject查询指定页信息

---------------------------------------------------------------------------------------

自定义标签

页面相关位置添加自定义标签

<page:page total="${total}" pageSize="${pageSize}"></page:page>

---------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
  <tlibversion>1.0</tlibversion>
  <jspversion>1.1</jspversion>
  <shortname>thd</shortname>
  <uri>http://www.thd.com/jsp/jstl/page</uri>
  <tag>
    <name>page</name>
    <tagclass>com.thd.common.tag.PageTag</tagclass>
    <bodycontent>JSP</bodycontent>
    <info>
      pager tag provide the frame of the page divider
    </info>
    <attribute>
      <name>total</name> 
      <required>true</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
    <attribute>
      <name>pageSize</name>
      <required>false</required>
      <rtexprvalue>true</rtexprvalue>
    </attribute>
  </tag>

</taglib>

---------------------------------------------------------------------------------------

public class PageTag  extends BodyTagSupport implements TagService{
/**页码*/
private int pageNo;
/**每页记录数,默认为10*/
private int pageSize;
/**总页数*/
private int pageCount;
/**最大显示多少页码*/
private int MAX_PAGE_SHOW=3;
/**总记录数*/
private int total;


public PageTag() {
super();
this.pageNo = 0;
this.pageSize = 10;
this.total = 0;
}
/**
* 页面输出
*/
@Override
public int doStartTag() throws JspTagException {
try {
String html = handler();
pageContext.getOut().write(html);
return Tag.SKIP_BODY;
} catch (JspTagException ioe) {
throw new JspTagException(ioe.getMessage(), ioe);
} catch (IOException e) {
throw new JspTagException(e.getMessage(), e);
}
}

@Override
public String handler() throws JspTagException {
if (total == 0 || pageSize == 0) {
StringBuilder html = new StringBuilder(200);
pageCount = 0;
pageNo = 0;
html.append("<table width=\"100%\" border=\"0\" "
+ "cellspacing=\"0\" cellpadding=\"0\"> ");
html.append("<tr><td class=\"tc cG line24\">"
+ "对不起，暂无查询记录</td></tr></table>");
return html.toString();
} else {
HttpServletRequest request = 
(HttpServletRequest) pageContext.getRequest();
this.putParam(request);
return this.getNavigatorBar(request);
}
}
/**
* 将分页HTML写到字符串中，还有JavaScript代码（两个函数，goPage（），goToPage（）跳到多少页）
* 共total条
* @param request
* @return
*/
private String getNavigatorBar(HttpServletRequest request) {
StringBuilder html = new StringBuilder(4000);
html.append("<div class='page_border mr20 pagination' style='padding:0;margin:0'>");
html.append("<div class='page' style='height:50px;margin:0;'>共<span class='cRed'>"+total+"</span>条&nbsp;");
int startNo = 1;
int endNo = pageCount > MAX_PAGE_SHOW ? MAX_PAGE_SHOW : pageCount;
if (pageNo > (MAX_PAGE_SHOW/2+1)) {
endNo = pageCount-pageNo > (MAX_PAGE_SHOW/2) ? pageNo + (MAX_PAGE_SHOW/2) : pageNo+(pageCount-pageNo);
//startNo = pageNo - MAX_PAGE_SHOW/2;
startNo=endNo-(MAX_PAGE_SHOW-1);
}
html.append("&nbsp;<span class='cRed'>"+(Integer.valueOf(total%pageSize)==0?Integer.valueOf(total/pageSize):Integer.valueOf(total/pageSize)+1)+"</span>页&nbsp;&nbsp;");
this.putPageInfo(html, startNo, endNo);

html.append("<span class='page_normal'>转到<span>&nbsp;<input id='thd_inputgopage' name='thd_inputgopage' type='text' class='page_inp' οnkeydοwn='enterJump(event,goToPage)' value='"+pageNo+"'/>&nbsp;<span class='page_normal'>页</span>&nbsp;<a οnclick='goToPage()'>确定</a></div>");
html.append("<input type='text' name='pageSize' id='thd_pageSize' style='display:none' value='"+pageSize+"'>");
html.append("</div>\n");

html.append("<script type='text/javascript'>\nfunction goPage(url,pageNum){");
// html.append("console.info(url+'===='+pageNum);");

html.append("\n var index=url.indexOf('?');");
html.append("\n if(index>0) url = url.substring(0,index);");
html.append("\n var pageSize = document.getElementById('thd_pageSize').value;");
html.append("\n url+='?pageNo='+pageNum+'"+"&pageSize='+pageSize+'" + getParamsFromCurrentURL(request) + "';");
html.append("\n url = url+\"&t=\"+new Date().getTime();url = encodeURI(url);");
html.append("\n $(\"#tbDiv\").load(url+\" #tbDiv\");\n}");
html.append("\nfunction goToPage(){");
html.append("\n var gopage = document.getElementById('thd_inputgopage').value;");
html.append("\n if(gopage ==''){art.dialog.through({lock:true,width :'25em',height:60,icon : 'warning',content : '请输入页码！',ok:function(){}});return false;}");
html.append("\n var pageSize = document.getElementById('thd_pageSize').value; var total = "+total+";var totalPage = 0; ");
html.append("\nif(total%pageSize<=0){totalPage=total/pageSize}else{totalPage=total/pageSize+1} ");
html.append("if(totalPage<gopage){gopage=parseInt(totalPage,10);}");
html.append("\n if(!isNaN(gopage)){");
html.append("\n  if(gopage<1){gopage=1}");
html.append("\n  if(gopage>" + pageCount + "){gopage=" + pageCount + "}");
html.append("\n goPage(window.location.href,gopage);\n }else{");
html.append("\n art.dialog.through({lock:true,width :'25em',height:60,icon : 'warning',content : '请输入有效的页码！',ok:function(){}});return false;\n }\n}\n</script>");
return html.toString();
}
/**
* 拼接一个字符串params（&name=value&）其中不包括pageNo和pageSize
* @param request
* @return
*/
@SuppressWarnings("rawtypes")
private String getParamsFromCurrentURL(HttpServletRequest request) {
StringBuffer params = new StringBuffer();
Enumeration enum1 = request.getParameterNames();
    while (enum1.hasMoreElements()) {
    String paramName = (String) enum1.nextElement();
    String paramValue = request.getParameter(paramName);
    if ("pageNo".equals(paramName)||"pageSize".equals(paramName)) {
    continue;
    }
    params.append("&").append(paramName).append("=")
    .append(paramValue);
    }
return params.toString();
}

public static void main(String[] args) {
StringBuilder sql = new StringBuilder("aaa");
sql.insert(0, "<fffff>");
System.out.println(sql.toString());
}
/**
* 实现首页，上页，下页，末页的点击功能，以及每一个页码上面的点击功能
* @param html
* @param startNo
* @param endNo
*/
private void putPageInfo(StringBuilder html, int startNo, int endNo) {
StringBuilder firstPage = new StringBuilder(100).append("首页");
StringBuilder prePage = new StringBuilder(100).append("上一页");
StringBuilder nextPage = new StringBuilder(100).append("下一页");
StringBuilder lastPage = new StringBuilder(100).append("末页");
if(pageNo == 1) {
firstPage.insert(0, "<a class='prev'>").append("</a>");
prePage.insert(0, "<a class='prev'>").append("</a>");
}
if (pageNo > 1) {
firstPage.insert(0, "<a href='javascript:goPage(window.location.href,1)'>").append("</a>");
prePage.insert(0, "<a href='javascript:goPage(window.location.href," + (pageNo - 1) + ")'>").append("</a>");
}
if (pageNo < pageCount) {
nextPage.insert(0, "<a href='javascript:goPage(window.location.href," + (pageNo + 1) + ")'>").append("</a>");
lastPage.insert(0, "<a href='javascript:goPage(window.location.href," + pageCount + ")'>").append("</a>");
}
if(pageNo == pageCount) {
nextPage.insert(0, "<a class='prev'>").append("</a>");
lastPage.insert(0, "<a class='prev'>").append("</a>");
}
html.append(firstPage.toString()).append("&nbsp;").append(prePage.toString()).append("&nbsp;");
for (int i = startNo; i <= endNo; i++) {
if (pageNo != i) {
html.append("<a href='javascript:goPage(window.location.href," + i + ")' >").append(i).append("&nbsp;").append("</a>");
} else {
/*html.append(i).append("&nbsp;");*/
html.append("<a class='hover current' >").append(i).append("&nbsp;").append("</a>");
}
}
html.append("&nbsp;").append(nextPage.toString()).append("&nbsp;").append(lastPage.toString()).append("&nbsp;");
}


/**
* 参数组装
* 
* @param request
*            void
*/
private void putParam(HttpServletRequest request) {
pageSize = pageSize == 0 ? 10 : pageSize;
pageCount = total % pageSize == 0 ? total / pageSize : total / pageSize + 1;
pageNo = request.getParameter("pageNo") == null ? 1 : Integer.parseInt(request.getParameter("pageNo"));
if (pageNo < 1) {
pageNo = 1;
}
if (pageNo > pageCount) {
pageNo = pageCount;
}
}


/**
* 输出标记内的内容
*/
@Override
public int doEndTag() throws JspTagException {
return Tag.EVAL_PAGE;
}


public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}


public void setTotal(int total) {
this.total = total;
}
}

---------------------------------------------------------------------------------------

原理：自定义一个分页标签，设置两个参数total（选填）和pageSize（必填），

查询的时候查询所有数据，每次点击的时候动态修改页面数据

---------------------------------------------------------------------------------------

PS：代码不是本人写的，include是培训学的，自定义标签内容是老大写的