DWZ 分页实现 后台前端框架

分页介绍

参考：官方用户手册中的“分页组件”       

  分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。  因为如果数据量很大，比如有好几百页，性能很慢。 

        分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage 。框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的

1 2 3 4 5 6 7 8 9 10 11 12

< form id = "pagerForm" action = "xxx" method = "post" > < input type = "hidden" name = "pageNum" value = "1" />/> < input type = "hidden" name = "numPerPage" value = "20" /> < input type = "hidden" name = "orderField" value = "xxx" /> < input type = "hidden" name = "orderDirection" value = "asc" /> < input type = "hidden" name = "name" value = "xxx" /> < input type = "hidden" name = "status" value = "active" /> …… form >

分页组件处理分页流程：

        1)  pagerForm中缓存了当前的查询条件，加上一个pageNum字段

        2)  点击分页时动态修改pageNum,重新提交pagerForm

分页组件使用方法： 

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

参数说明:

                targetType: navTab或dialog，用来标记是navTab上的分页还是dialog上的分页 （dialog是弹窗窗口的模式，如果是dialog那么下面对应的targetType和οnsubmit="return navTabSearch(this);" 等都要修改(dialogSearch(this))）

                totalCount: 总条数        

                numPerPage: 每页显示多少条

                pageNumShown: 页标数字多少个

                currentPage: 当前是第几页

注意：

服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。

实际应用

前台（JSP）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>   < div  class = "pageHeader" >      < form  id = "pagerForm"  rel = "pagerForm"  onsubmit = "return navTabSearch(this);"  action = "user"  method = "post" >          < input  type = "hidden"  name = "pageNum"  value = "1"  />          < input  type = "hidden"  name = "numPerPage"  value = "${dwzPage.numPerPage}"  />          < input  type = "hidden"  name = "method"  value = "page"  />          < div  class = "searchBar" >              < table  class = "searchContent" >                  < tr >                      < td >                          手机：< input  type = "text"  name = "phone"  value = "${phone}"  />                      td >                      < td >                          名字：< input  type = "text"  name = "name"  value = "${name}"  />                      td >                      < td >                          < select  class = "combox"  name = "status" >                              < option  value = "" >用户状态 option >                              < option  value = "0"  test = "${0 == status }" >selected="selected" c:if >>未激活 option >                              < option  value = "1"  test = "${1 == status }" >selected="selected" c:if >>已激活 option >                              < option  value = "2"  test = "${2 == status }" >selected="selected" c:if >>拒绝 option >                              < option  value = "3"  test = "${3 == status }" >selected="selected" c:if >>取消关注 option >                              < option  value = "4"  test = "${4 == status }" >selected="selected" c:if >>离职 option >                              < option  value = "5"  test = "${5 == status }" >selected="selected" c:if >>黑名单 option >                          select >                      td >                  tr >              table >              < div  class = "subBar" >                  < ul >                      < li >< div  class = "buttonActive" >< div  class = "buttonContent" >< button  type = "submit" >检索 button > div > div > li >                  ul >              div >          div >      form > div > < div  class = "pageContent" >      < div  class = "panelBar" >          < ul  class = "toolBar" >              < li >< a  class = "edit"  href = "user?method=editPage&uid={sid_user}"  target = "navTab"  warn = "请选择一个用户" >< span >修改 span > a > li >              < li  class = "line" >line li >              < li >< a  title = "确实要设置为管理员吗?"  target = "selectedTodo"  rel = "ids"  href = "user?method=setAdmin"  class = "add" >< span >设置为管理员 span > a > li >              < li  class = "line" >line li >          ul >      div >      < table  class = "table"  width = "100%"  layoutH = "138" >          < thead >              < tr >                  < th  width = "22" >< input  type = "checkbox"  group = "ids"  class = "checkboxCtrl" > th >                  < th  width = "70" >姓名 th >                  < th  width = "120" >手机 th >                  < th  width = "80" >用户状态 th >                  < th  width = "120" >用户类型 th >                  < th  >备注 th >              tr >          thead >          < tbody >              < c:forEach  items = "${dwzPage.list }"  var = "user"  >                  < tr  target = "sid_user"  rel = "${user.id }" >                      < td >< input  name = "ids"  value = "${user.id }"  type = "checkbox"  > td >                      < td >${user.name } td >                      < td >${user.phone } td >                      < c:if  test = "${user.status==0 }" >                          < td >未激活 td >                      c:if >                      < c:if  test = "${user.status==1 }" >                          < td >已激活 td >                      c:if >                      < c:if  test = "${user.status==2 }" >                          < td >拒绝 td >                      c:if >                      < c:if  test = "${user.status==3 }" >                          < td >取消关注 td >                      c:if >                      < c:if  test = "${user.status==4 }" >                          < td >离职 td >                      c:if >                      < c:if  test = "${user.status==5 }" >                          < td >黑名单 td >                      c:if >                      < c:if  test="${user.status>5 }">                          < td >其他 td >                      c:if >                      < c:if  test = "${user.type==0 }" >                          < td >管理员 td >                      c:if >                      < c:if  test = "${user.type==1 }" >                          < td >普通用户 td >                      c:if >                      < c:if  test="${user.type>1 }">                          < td >其他 td >                      c:if >                                            < td >${user.remark } td >                                                              tr >              c:forEach >          tbody >      table >      < div  class = "panelBar" >          < div  class = "pages" >              < span >显示 span >                            < select  class = "combox"  name = "numPerPage"  onchange = "navTabPageBreak({numPerPage:this.value})" >                               < option  value = "10"  test = "${10 == dwzPage.numPerPage }" >selected="selected" c:if >>10 option >                  < option  value = "20"  test = "${20 == dwzPage.numPerPage }" >selected="selected" c:if >>20 option >                  < option   value = "50"  test = "${50 == dwzPage.numPerPage }" >selected="selected" c:if >>50 option >              select >              < span >条，共${dwzPage.totalCount}条 span >          div >          < div  class = "pagination"  targetType = "navTab"  totalCount = "${dwzPage.totalCount}"  numPerPage = "${dwzPage.numPerPage }"  pageNumShown = "${dwzPage.pageNumShown }"  currentPage = "${dwzPage.currentPage }" > div >          <%-- < div  class = "pagination"  targetType = "dialog"  totalCount = "${dwzPage.totalCount}"  numPerPage = "${dwzPage.numPerPage }"  pageNumShown = "10"  currentPage = "${dwzPage.pageNum }" > div > --%>                 div > div >

分页实体类（DwzPage.java）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

package  com.qsachina.util;   import  java.util.List;   public  class  DwzPage {        private  int  currentPage =  1 ;  // 当前页数，默认第一页      private  int  numPerPage =  20 ;  // 每页个数，默认20      private  int  totalCount =  0 ;  // 总数，默认0      private  int  pageNumShown =  10 ;  // 页标数字多少个，默认10      private  String orderField;  // 排序方式      private  String orderDirection;  // 升序降序      private  List

Servlet类（UserServlet.java）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

// 组装查询条件 String name = request.getParameter( "name" ); String phone = request.getParameter( "phone" ); String status = request.getParameter( "status" ); Map params =  new  HashMap<>(); if (StringUtil.isNotEmpty(name)){  // name等参数可能是null       params.put( "name" , name.trim());      request.setAttribute( "name" , name.trim());   // 查询条件设置回前台 } if (StringUtil.isNotEmpty(phone)){      params.put( "phone" , phone.trim());      request.setAttribute( "phone" , phone.trim());   } if (StringUtil.isNotEmpty(status)){      params.put( "status" , status.trim());      request.setAttribute( "status" , status.trim());   }   // 分页 String currentPage = request.getParameter( "pageNum" ); String numPerPage = request.getParameter( "numPerPage" );   DwzPage dwzPage = userService.getPageByParams(params,currentPage,numPerPage); request.setAttribute( "dwzPage" , dwzPage); request.getRequestDispatcher(page).forward(request, response);

Service类（UserService.java）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

/**   *    * @param params   *            查询条件   * @param currentPage   *            当前页   * @param numPerPage   *            每页个数   * @return 分页实体类   */ public  DwzPage getPageByParams(Map params, String currentPage, String numPerPage) {        DwzPage dwzPage =  new  DwzPage();      if (StringUtil.isNotEmpty(currentPage)){          dwzPage.setCurrentPage(Integer.parseInt(currentPage));      }      if (StringUtil.isNotEmpty(numPerPage)){          dwzPage.setNumPerPage(Integer.parseInt(numPerPage));      }                List

密码 阿宓生日，链接：http://pan.baidu.com/s/1kTtRWW3 密码：tzpc

《DWZ笔记五》联动菜单等可以参考此博客http://heavengate.blog.163.com/blog/#m=0&t=1&c=fks_084070086081084067086082083095086086083064092087086070087