DWZ (JUI) 教程 DWZ table 分页排序教程

转载自:  http://blog.csdn.net/jiweigang1/article/details/7771597

一直很忙 demo一直没有写，最近忙着换工作空闲之余，写一下分页排序的 Demo 其实 也是比较简单的

顺便也录了一个小视频   http://115.com/file/c2ik04qy

                                            http://v.youku.com/v_show/id_XNDMxMDMzOTg4.html

JSP 页面

 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <form id="pagerForm" method="post" action="user!searchUser.do">
     <input type="hidden" name="status"   value="${param.status}">
     <input type="hidden" name="keywords" value="${param.keywords}" />
     <input type="hidden" name="pageNum" value="1" />
     <input type="hidden" name="numPerPage" value="${model.numPerPage}" />

     <input type="hidden" name="orderField"       value="${param.orderField}" />
     <input type="hidden" name="orderDirection"  value="${param.orderDirection}" />
 </form>


 <div class="pageHeader">
     <form onsubmit="return navTabSearch(this);" action="user!searchUser.do" method="post">
     <div class="searchBar">
     </div>
     </form>
 </div>
 <div class="pageContent">
     <div class="panelBar">
         <ul class="toolBar">
             <li class="line">line</li>
         </ul>
     </div>
     <table class="table" width="100%" layoutH="90">
         <thead>
             <tr>
                 <th width="80">序号</th>
                 <th width="120" orderField="name" <c:if test='${param.orderField == "name" }'> class="${param.orderDirection}"  </c:if>   >名字</th>
                 <th width="120" orderField="realName" <c:if test='${param.orderField == "realName" }'> class="${param.orderDirection}"  </c:if> >真实姓名</th>
                 <th width="120" orderField="sex" <c:if test='${param.orderField == "sex" }'> class="${param.orderDirection}"  </c:if>  >性别</th>
                 <th >phone</th>
             </tr>
         </thead>
         <tbody>
          <c:forEach var="p" items="${pages.pages}" varStatus="status" >
             <tr target="sid" rel="${p.id}">
                 <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>
                 <td>${p.name}</td>
                 <td>${p.realName}</td>
                 <td>${p.sex}</td>
                 <td>${p.phone}</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="20">20</option>
                 <option value="50">50</option>
                 <option value="100">100</option>
                 <option value="200">200</option>
             </select>
             <span>条，共${pages.count}条</span>
         </div>

         <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>

     </div>
 </div>

重点是 

 <input type="hidden" name="orderField"       value="${param.orderField}" />
 <input type="hidden" name="orderDirection"  value="${param.orderDirection}" />

 要和Action的属性对上

 <c:if test='${param.orderField == "name" }'> class="${param.orderDirection}"  </c:if>
 用来切换 图标 点击时切换 排序类型

Action 层

 package com.web.action;

 import javax.annotation.Resource;
 import org.springframework.context.annotation.Scope;
 import org.springframework.stereotype.Controller;

 import com.web.model.User;
 import com.web.service.UserService;

 /**
  *
  * @author Administrator
  *
  */
 @Controller()
 @Scope("prototype")
 public class UserAction extends BaseAction {


             private User  user = new User();
             @Resource
             private UserService userService;
             private String orderField;
             private String orderDirection;

             /**
              * 查询用户
              * @return
              */
             public String searchUser(){
                 pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);
                 return RESULT;
             }




             public User getUser() {
                 return user;
             }

             public void setUser(User user) {
                 this.user = user;
             }

             public UserService getUserService() {
                 return userService;
             }

             public void setUserService(UserService userService) {
                 this.userService = userService;
             }




             public String getOrderField() {
                 return orderField;
             }




             public void setOrderField(String orderField) {
                 this.orderField = orderField;
             }




             public String getOrderDirection() {
                 return orderDirection;
             }




             public void setOrderDirection(String orderDirection) {
                 this.orderDirection = orderDirection;
             }

 }

重点是 

 private String orderField;
 private String orderDirection;

 一般写到BaseAction中就行了

Service层

 package com.web.service.impl;

 import com.dwz.util.Pages;
 import org.springframework.stereotype.Service;
 import javax.annotation.Resource;
 import com.web.model.User;
 import com.web.dao.UserDao;
 import com.web.service.UserService;


 @Service("userService")
 public class UserServiceImpl implements UserService {

     @Resource
     private UserDao userDao;


     @Override
     public User getUser(int id) {
         return userDao.get(id);
     }

     @Override
     public void addUser(User user) {
          userDao.insert(user);
     }

     @Override
     public void updateUser(User user) {
          userDao.update(user);
     }

     @Override
     public void deleteUser(int id) {
          userDao.delete(id);
     }

     @Override
     public void reportUser(User user) {
          userDao.insertOrUpdate(user ,user.getId());
     }

     @Override
     public Pages searchUser(int pageNo ,int pageSize ,User user , String orderField ,String orderDirection){
            String where = " where 1 = 1";
            if(orderField!=null&&!orderField.trim().equals("")){
                if(orderDirection==null||orderDirection.trim().equals("")){
                    orderDirection = "asc";
                }

                where +=" order by "+orderField +" "+orderDirection;
            }
            return userDao.listInPages(pageNo, pageSize, where);
     }


 }

其是比较简单 希望对大家有帮助

效果图