Jsp分頁的簡單制作
運行環境:jsp+tomcat+eclipse
技術:servlet+jsp+mysql
分頁技術還區分兩個:假分頁和真分頁
假分頁:一次性從數據庫讀出表的所有數據一次性的返回給客戶端,由js來控制每一頁的顯示。
真分頁:由程序控制,每一次只返回一頁大小的數據,顯示到客戶端。
由此可以很清楚的分辨出真假分頁各自的優缺點:
假分頁:由於一次性讀出所有數據並返回給客戶端,如果數據量龐大,所以這一次的動作可能是非常消耗服務器資源和帶寬的,
但是返回給客戶端以后就非常輕松了,客戶在一段時間內不會再像服務器端請求資源。但不代表可能出現一些意外情況,
比如說客戶將瀏覽器關閉,重新訪問網站等。
真分頁:假分頁每次只取需要的數據返回給客戶端,比起真分頁沒有那么大的數據庫壓力。但也因為這個工作特性,所以假分頁
的方法需要頻繁和服務器端進行交互。既然頻繁交互,自然也會給服務器帶來負擔。
綜上:如果數據量較小,使用假分頁的效果會更優,如果數據量龐大,使用真分頁的效果更優。
在制作分頁的時候你需要了解,分頁的數據,分頁的一些屬性有哪些
- 分頁的數據:這些數據可以從數據庫中提取出來的,也可以網上搜索得到的
- 分頁的屬性:
-
-
- 數據總數
- 頁面的數據多少條
- 總的頁面數
- 最后一頁
- 第一頁
- 當前頁
-
我們可以將這些屬性變成一個實體類中的屬性來調用,會感覺更加的清晰
先創建一個實體類:
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}"><< 首頁 </a> <a href="Staff_ListServlet?page=${paging.page-1 }"> < 上一頁 </a> <strong>第${paging.page+1}頁/共${paging.pagenumber}頁</strong> <a href="Staff_ListServlet?page=${paging.page+1}">下一頁 ></a> <a href="Staff_ListServlet?page=${paging.pagenumber-1}">末頁 >></a> </p> <br /> <br /> </div> </div> </div>
就這樣一個分頁解決了,很有復用性,可能有點麻煩,給大家參考一下
其實也可以不用建一個頁面的屬性實體類制作,大家可以嘗試一下
