Jsp分頁的簡單制作


Jsp分頁的簡單制作

運行環境:jsp+tomcat+eclipse

技術:servlet+jsp+mysql

分頁技術還區分兩個:假分頁和真分頁

  假分頁:一次性從數據庫讀出表的所有數據一次性的返回給客戶端,由js來控制每一頁的顯示。

  真分頁:由程序控制,每一次只返回一頁大小的數據,顯示到客戶端。

  由此可以很清楚的分辨出真假分頁各自的優缺點:

  假分頁:由於一次性讀出所有數據並返回給客戶端,如果數據量龐大,所以這一次的動作可能是非常消耗服務器資源和帶寬的,

但是返回給客戶端以后就非常輕松了,客戶在一段時間內不會再像服務器端請求資源。但不代表可能出現一些意外情況,

比如說客戶將瀏覽器關閉,重新訪問網站等。

  真分頁:假分頁每次只取需要的數據返回給客戶端,比起真分頁沒有那么大的數據庫壓力。但也因為這個工作特性,所以假分頁

的方法需要頻繁和服務器端進行交互。既然頻繁交互,自然也會給服務器帶來負擔。

  綜上:如果數據量較小,使用假分頁的效果會更優,如果數據量龐大,使用真分頁的效果更優。

  在制作分頁的時候你需要了解,分頁的數據,分頁的一些屬性有哪些

  1. 分頁的數據:這些數據可以從數據庫中提取出來的,也可以網上搜索得到的
  2. 分頁的屬性:
      • 數據總數
      • 頁面的數據多少條
      • 總的頁面數
      • 最后一頁
      • 第一頁
      • 當前頁

  我們可以將這些屬性變成一個實體類中的屬性來調用,會感覺更加的清晰

  先創建一個實體類:

public class Paging {
    private int page;//當前頁
    private int pagesize;//頁面數據條數
    private int indexpage=1;//首頁
    private int endpage;//尾頁
    private int count;//總數據條數
    private int pagenumber;//總頁面數
    private List<Object> list;//得到的數據放入list集合中
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getPagesize() {
        return pagesize;
    }
    public void setPagesize(int pagesize) {
        this.pagesize = pagesize;
    }
    public int getIndexpage() {
        return indexpage;
    }
    public void setIndexpage(int indexpage) {
        this.indexpage = indexpage;
    }
    public int getEndpage() {
        
        return endpage;
    }
    public void setEndpage() {
        this.endpage=pagenumber;
    }
    public int getCount() {
        this.count=list.size();
        return count;
    }
    public void setCount() {
        this.count=list.size();
    }
    
    public int getPagenumber() {
        return pagenumber;
    }
    public void setPagenumber() {
        this.pagenumber=(count%pagesize==0)?count/pagesize:count/pagesize+1;
    }
    public List<Object> getList() {
        return list;
    }
    public void setList(List<Object> list) {
        this.list = list;
    }

}

需要創建一個servlet

public class Staff_ListServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Stuff stuff=new Stuff();
        stuff.setStaff("1");
        List<Object> list=    DAO.query(stuff);
        //頁面當前頁
        int page=0;
        //得到傳過來的當前頁
        String str_page=    request.getParameter("page");
        /**
         * 創建分頁的關於一些內容的工具bean
         * 
         * */
        Paging paging=new Paging();
        paging.setList(list);//從數據庫得到數據存入的list集合
        paging.setCount();//數據總數
        paging.setPagesize(5);//一個頁面的數據多少條
        paging.setPagenumber();//總的頁面數
        paging.setEndpage();//最后一頁
        paging.setIndexpage(1);//第一頁
        if (str_page!=null) {
            //將頁轉換整型判斷其大小
            int pag=Integer.parseInt(str_page);
            //當大於零,將傳過來的pag值賦給當前頁page
            if (pag>=0) {
                page=pag;
                //如果小於最大值時則,將其傳過來的值減1在賦值給當前頁,讓其一直在最后一頁
                if (pag>(paging.getPagenumber()-1)) {
                    page=pag-1;
                }
            }
        }
        paging.setPage(page);//最終確認當前頁
        List<Object> list_page =new ArrayList<>();
        //將當前頁的值傳給新的list_page集合中,list集合是全部數據綜合,用i調用其中的幾條數據給list_page
        for (int i = paging.getPage()*paging.getPagesize(); i <(paging.getPage()+1)*paging.getPagesize()&&i<list.size(); i++) {
            list_page.add(list.get(i));
        }
        //將paging對象其設置在作用域中,以便后面頁面調用
        request.setAttribute("paging", paging);
        request.setAttribute("list", list_page);
        request.getRequestDispatcher("staff_list.jsp").forward(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

 

在頁面中用EL表達式調用這些request請求設置的可讓數據在頁面顯示,這是個jsp頁面,EL表達式只能在jsp頁面使用

  關鍵點在下面的可以問號傳參,返回servlet中將當前操作傳過去,這個可以結合js中的ajax,實現頁面的刷新了
<div id="content_right">
                        <br />
                        <br />

                        <div class="btwz">
                            人員列表
                        </div>
                        <br>
                        <form name="form1" action="Staff_InfoServlet" method="post">
                            <table cellspacing="1" class="table">
                                <tr class="table_header">
                                    <td valign="middle" align="left">
                                        姓名
                                    </td>
                                    <td valign="middle" align="left">
                                        性別
                                    </td>
                                    <td valign="middle" align="left">
                                        入職時間
                                    </td>
                                    <td valign="middle" align="left">
                                        職位
                                    </td>
                                    <td valign="middle" align="left">
                                        詳細信息
                                    </td>
                                    <td valign="middle" align="left">
                                    </td>
                                </tr>
                                <c:forEach items="${list}" var="list">
                                <tr class="row2" onMouseOver="this.className='row1'"
                                    onMouseOut="this.className='row2'">
                                    <td valign="middle" align="left">
                                        ${list.name}
                                    </td>
                                    <td valign="middle" align="left">
                                        ${list.sex}
                                    </td>
                                    <td valign="middle" align="left">
                                        ${list.hiredate}
                                    </td>
                                    <td valign="middle" align="left">
                                        ${list.position}
                                    </td>
                                    <td valign="middle" align="left">
                                        <input type="radio" name="choose"  value="${list.id}"/>
                                    </td>
                                    <td valign="middle" align="left">
                                        <input type="checkbox" name="empId" value="${list.id}">
                                    </td>
                                </tr>
                                </c:forEach>
                            </table>
                        </form>
                        <p align="right">
                            <input type="button" class="button" value="添加人員"
                                onclick="location='createStaff.jsp'" />
                            <input type="button" class="button" value="詳細信息"
                                onClick="    document.forms[0].submit();" />
                            <input type="button" Class="button" value=" 刪  除 "
                                onClick="go()" />
                        </p>
                        ${Nochoose}
<p class="paging"> <a href="Staff_ListServlet?page=${paging.indexpage-1}">&lt;&lt; 首頁 </a> <a href="Staff_ListServlet?page=${paging.page-1 }"> &lt; 上一頁 </a> <strong>第${paging.page+1}頁/共${paging.pagenumber}頁</strong> <a href="Staff_ListServlet?page=${paging.page+1}">下一頁 &gt;</a> <a href="Staff_ListServlet?page=${paging.pagenumber-1}">末頁 &gt;&gt;</a> </p> <br /> <br /> </div> </div> </div>

就這樣一個分頁解決了,很有復用性,可能有點麻煩,給大家參考一下

其實也可以不用建一個頁面的屬性實體類制作,大家可以嘗試一下


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM