jsp標簽--自定義分頁標簽

1.定義分頁標簽的xml文件，需要引用taglib標簽庫，在<tag></tag>里面定義自定義標簽

<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0">

    <tlib-version>1.0</tlib-version>
    <short-name>commons</short-name>
    <uri>http://page.yimin.com/tag</uri>
        
        <tag>
        <description>test</description>
        <name>pages</name>
        <tag-class>com.data.util.Tag</tag-class>
        <body-content>JSP</body-content>
        <attribute>
            <name>bean</name>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
        <attribute>
            <name>number</name>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
        <attribute>
            <name>url</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

2.實現標簽需要的Java類<tag-class>com.data.util.Tag</tag-class>，這里使用的是page對象來保存分頁信息。

package com.data.util; import java.io.IOException; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.jsp.JspException; import javax.servlet.jsp.JspWriter; import javax.servlet.jsp.tagext.TagSupport; /** * 顯示格式 上一頁 1 2 3 4 5 下一頁 */
public class Tag extends TagSupport { static final long serialVersionUID = 2372405317744358833L; /** * request 中用於保存Page<E> 對象的變量名,默認為“page” */
    private String bean = "page"; /** * 分頁跳轉的url地址,此屬性必須 */
    private String url = null; /** * 顯示頁碼數量 */
    private int number = 5; @Override public int doStartTag() throws JspException { JspWriter writer = pageContext.getOut(); HttpServletRequest request = (HttpServletRequest) pageContext.getRequest(); Page page = (Page)request.getAttribute(bean); if (page == null) return SKIP_BODY; url = resolveUrl(url, pageContext); try { //計算總頁數
            int pageCount = page.getTotal() / page.getSize(); if (page.getTotal() % page.getSize() > 0) { pageCount++; } writer.print("<nav><ul class=\"pagination\">"); //顯示首頁按鈕
            String purl = append(url, "page",  1); purl = append(purl, "rows", page.getSize()); writer.print("<li><a href=\"" + purl + "\">第一頁</a></li>"); //顯示“上一頁”按鈕
            if (page.getPage() > 1) { String preUrl = append(url, "page", page.getPage() - 1); preUrl = append(preUrl, "rows", page.getSize()); writer.print("<li><a href=\"" + preUrl + "\">上一頁</a></li>"); } else { writer.print("<li class=\"disabled\"><a href=\"#\">上一頁</a></li>"); } //顯示當前頁碼的前2頁碼和后兩頁碼 //若1 則 1 2 3 4 5, 若2 則 1 2 3 4 5, 若3 則1 2 3 4 5, //若4 則 2 3 4 5 6 ,若10 則 8 9 10 11 12
            int indexPage = (page.getPage() - 2 > 0)? page.getPage() - 2 : 1; for(int i=1; i <= number && indexPage <= pageCount; indexPage++, i++) { if(indexPage == page.getPage()) { writer.print( "<li class=\"active\"><a href=\"#\">"+indexPage+"<span class=\"sr-only\">(current)</span></a></li>"); continue; } String pageUrl = append(url, "page", indexPage); pageUrl = append(pageUrl, "rows", page.getSize()); writer.print("<li><a href=\"" + pageUrl + "\">"+ indexPage +"</a></li>"); } //顯示“下一頁”按鈕
            if (page.getPage() < pageCount) { String nextUrl = append(url, "page", page.getPage() + 1); nextUrl = append(nextUrl, "rows", page.getSize()); writer.print("<li><a href=\"" + nextUrl + "\">下一頁</a></li>"); } else { writer.print("<li class=\"disabled\"><a href=\"#\">下一頁</a></li>"); } //顯示末頁按鈕
            String purl2 = append(url, "page", pageCount); purl2 = append(purl2, "rows", page.getSize()); writer.print("<li><a href=\"" + purl2 + "\">末頁</a></li>"); writer.print("<p class=\"navbar-text\">（共"+page.getTotal()+"項記錄，分"+pageCount+"頁，當前為第"+page.getPage()+"頁)</p>"); writer.print("</nav>"); } catch (IOException e) { e.printStackTrace(); } return SKIP_BODY; } private String append(String url, String key, int value) { return append(url, key, String.valueOf(value)); } /** * 為url 參加參數對兒 * * @param url * @param key * @param value * @return
     */
    private String append(String url, String key, String value) { if (url == null || url.trim().length() == 0) { return ""; } if (url.indexOf("?") == -1) { url = url + "?" + key + "=" + value; } else { if(url.endsWith("?")) { url = url + key + "=" + value; } else { url = url + "&amp;" + key + "=" + value; } } return url; } /** * 為url 添加翻頁請求參數 * * @param url * @param pageContext * @return * @throws JspException */
    private String resolveUrl(String url, javax.servlet.jsp.PageContext pageContext) throws JspException{ //UrlSupport.resolveUrl(url, context, pageContext)
        Map params = pageContext.getRequest().getParameterMap(); for (Object key:params.keySet()) { if ("page".equals(key) || "rows".equals(key)) continue; Object value = params.get(key); if (value == null) continue; if (value.getClass().isArray()) { url = append(url, key.toString(), ((String[])value)[0]); } else if (value instanceof String) { url = append(url, key.toString(), value.toString()); } } return url; } /** * @return the bean */
    public String getBean() { return bean; } /** * @param bean the bean to set */
    public void setBean(String bean) { this.bean = bean; } /** * @return the url */
    public String getUrl() { return url; } /** * @param url the url to set */
    public void setUrl(String url) { this.url = url; } public  int getNumber(){ return number; } public void setNumber(int number) { this.number = number; } }

package com.data.util; import java.util.List; public class Page<T> { private int total;//信息總數
    private int page;//當前頁
    private int size;//每頁信息條數
    private List<T> rows;//每一頁的信息存放的列表
 @Override public String toString() { return "Page{" +
                "total=" + total +
                ", page=" + page +
                ", size=" + size +
                ", rows=" + rows +
                '}'; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } public int getPage() { return page; } public void setPage(int page) { this.page = page; } public int getSize() { return size; } public void setSize(int size) { this.size = size; } public List<T> getRows() { return rows; } public void setRows(List<T> rows) { this.rows = rows; } }

3.頁面的使用，這里用了bootstrap的分頁樣式

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="commons" uri="http://page.yimin.com/tag"%> //這里的uri與xml文件里定義的uri一致就可以了，不需要真是的網址 <div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">數據列表</div>
            <!-- /.panel-heading -->
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th style="display: none">ID</th>
                    <th>名稱</th>
                    <th>上傳人</th>
                    <th>電話</th>
                    <th colspan="2">描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${pages.rows}" var="row">
                    <tr>
                        <td style="display: none">${row.dataID}</td>
                        <td>${row.dataName}</td>
                        <td>${row.people}</td>
                        <td>${row.telphone}</td>
                        <td colspan="2">${row.des}</td>
                        <td>
                            <a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#dataEditDialog" onclick="editdata('${row.dataID}')">修改</a>
                            <a href="#" class="btn btn-danger btn-xs" onclick="deletedata('${row.dataID}')">刪除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div class="col-md-12 text-right">
                <%--<commons:page size="${pages.size}" total="${pages.total}" curr="${pages.page}" href="/dataMange/list.action" />--%>
                <commons:pages url="/dataMange/list.action" bean="pages"/>
            </div>
        </div>
    </div>

4.后端代碼

 @RequestMapping(value = "list",method = RequestMethod.GET) public String list(@RequestParam(value = "dataName",required = false) String dataName, @RequestParam(value = "people",required = false) String people, @RequestParam(value = "telphone",required = false) String telphone, @RequestParam(value = "primarykey",required = false) String des, @RequestParam(value = "page",required = false) Integer pages, @RequestParam(value = "window_height",required = false) Integer height, Model model, HttpServletRequest request){ String auth = (String)request.getSession().getAttribute("authority"); String username = (String)request.getSession().getAttribute("user"); //將獲得的參數封裝成一個QueryVo對象，這里有待改進
 dataQueryVo vo ; if(auth.equals("1")){ String admin = userservice.getAdminName(username); vo=new dataQueryVo(dataName,people,telphone,des,pages,height,username,admin); } else if(auth.equals("2")){ vo=new dataQueryVo(dataName,people,telphone,des,pages,height,username,null); } else{ vo=new dataQueryVo(dataName,people,telphone,des,pages,height,null,null); } if(vo.getHeight() != null){ Integer size = vo.getHeight()/90; vo.setSize(size); } else { vo.setSize(8); } // 判斷當前頁
        if (null != vo.getPage()) { vo.setStartRow((vo.getPage() -1)*vo.getSize()); } if(null != vo.getData_Name() && !"".equals(vo.getData_Name().trim())){ vo.setData_Name(vo.getData_Name().trim()); } if(null != vo.getData_people() && !"".equals(vo.getData_people().trim())){ vo.setData_people(vo.getData_people().trim()); } if(null != vo.getData_telphone() && !"".equals(vo.getData_telphone().trim())){ vo.setData_telphone(vo.getData_telphone().trim()); } if(null != vo.getData_des() && !"".equals(vo.getData_des().trim())){ vo.setData_des(vo.getData_des().trim()); } if(null != vo.getData_path() && !"".equals(vo.getData_path().trim())){ vo.setData_path(vo.getData_path().trim()); } //通過條件 查詢分頁對象
        Page<dataModel> page = dataservice.selectPageByQueryVo(vo); model.addAttribute("pages", page); request.setAttribute("size",vo.getSize()); request.setAttribute("total",page.getTotal()); return "dataMange/dataManges"; }

 @Override public Page<dataModel> selectPageByQueryVo(dataQueryVo vo){ Page<dataModel> page = new Page<>(); //每頁數
 page.setSize(vo.getSize()); if(vo.getPage()==null){ page.setPage(1); } else { page.setPage(vo.getPage()); } if (null != vo) { //總條數
 page.setTotal(datamapper.dataModelCountByQueryVo(vo)); page.setRows(datamapper.selectdataModelListByQueryVo(vo)); } return page; }

dataQueryVo

 

package com.data.model; public class dataQueryVo { //數據信息
    private String data_Name; private String data_people; private String data_telphone; private String data_des; private String data_path; private Integer height; private String username; private String admin; //當前頁
    private Integer page; //每頁數
    private Integer size = 10; //開始行
    private Integer startRow = 0;

 

mapper

 <select id="selectdataModelListByQueryVo" parameterType="com.data.model.dataQueryVo" resultType="com.data.model.dataModel"> select * from datatab <where>
            <if test="data_Name != null and data_Name != ''"> dataName like "%"#{data_Name}"%"
            </if>
            <if test="data_people != null and data_people != ''"> and people = #{data_people} </if>
            <if test="data_telphone != null and data_telphone != ''"> and telphone = #{data_telphone} </if>
            <if test="data_des != null and data_des != ''"> and des = #{data_des} </if>
            <if test="username !=null and username !=''"> and username = #{username} </if>
            <if test="admin !=null and admin !=''"> and admin = #{admin} </if>
        </where> limit #{startRow},#{size} </select>
 <select id="dataModelCountByQueryVo" parameterType="com.data.model.dataQueryVo" resultType="int"> select count(1) from datatab <where>
            <if test="data_Name != null and data_Name != ''"> dataName like "%"#{data_Name}"%"
            </if>
            <if test="data_people != null and data_people != ''"> and people = #{data_people} </if>
            <if test="data_telphone != null and data_telphone != ''"> and telphone = #{data_telphone} </if>
            <if test="data_des != null and data_des != ''"> and des = #{data_des} </if>
        </where>
    </select>

 

 

效果展示

分析：

寫代碼過程中最主要的困惑是，它是怎么實現跳轉到下一頁的。

其實它這里就是簡單的每一個對應頁的按鈕為一個a標簽，走get請求時，在生成的時候對里面動態的拼接當前頁的信息

String pageUrl  = append(url, "page", indexPage);//這里的url是包括查詢信息在內的get請求路徑，在后面再拼接indexPage即此按鈕對應的頁數, pageUrl = append(pageUrl, "rows", page.getSize()); writer.print("<li><a href=\"" + pageUrl + "\">"+ indexPage +"</a></li>");//將上面得到的拼接好的請求路徑加入到需要生成的按鈕里，該按鈕本質就是一個a標簽

第一次form表單提交的時候，在controller層得到的pages是為null，所以在service層進行判斷，如果其為null就說明是第一次請求就是第一頁。這樣返回的page對象里面包含的當前頁就是第一頁，在tag類里面進行了第一次生成，生成其他的頁數的按鈕，下次進行點擊的時候，發送給后端的請求就是帶有當前頁信息的請求了。