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

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

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

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

JSP 页面

[html] view plain copy

1. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
2. <form id="pagerForm" method="post" action="user!searchUser.do">  
3.     <input type="hidden" name="status"   value="${param.status}">  
4.     <input type="hidden" name="keywords" value="${param.keywords}" />  
5.     <input type="hidden" name="pageNum" value="1" />  
6.     <input type="hidden" name="numPerPage" value="${model.numPerPage}" />  
7.       
8.     <input type="hidden" name="orderField"       value="${param.orderField}" />  
9.     <input type="hidden" name="orderDirection"  value="${param.orderDirection}" />  
10. </form>  
11.   
12.   
13. <div class="pageHeader">  
14.     <form onsubmit="return navTabSearch(this);" action="user!searchUser.do" method="post">  
15.     <div class="searchBar">  
16.     </div>  
17.     </form>  
18. </div>  
19. <div class="pageContent">  
20.     <div class="panelBar">  
21.         <ul class="toolBar">  
22.             <li class="line">line</li>  
23.         </ul>  
24.     </div>  
25.     <table class="table" width="100%" layoutH="90">  
26.         <thead>  
27.             <tr>  
28.                 <th width="80">序号</th>  
29.                 <th width="120" orderField="name" <c:if test='${param.orderField == "name" }'> class="${param.orderDirection}"  </c:if>   >名字</th>  
30.                 <th width="120" orderField="realName" <c:if test='${param.orderField == "realName" }'> class="${param.orderDirection}"  </c:if> >真实姓名</th>  
31.                 <th width="120" orderField="sex" <c:if test='${param.orderField == "sex" }'> class="${param.orderDirection}"  </c:if>  >性别</th>  
32.                 <th >phone</th>  
33.             </tr>  
34.         </thead>  
35.         <tbody>  
36.          <c:forEach var="p" items="${pages.pages}" varStatus="status" >   
37.             <tr target="sid" rel="${p.id}">  
38.                 <td>${status.count + (pages.pageNo-1)*pages.pageSize}</td>  
39.                 <td>${p.name}</td>  
40.                 <td>${p.realName}</td>  
41.                 <td>${p.sex}</td>  
42.                 <td>${p.phone}</td>  
43.             </tr>  
44.           </c:forEach>  
45.         </tbody>  
46.     </table>  
47.     <div class="panelBar">  
48.         <div class="pages">  
49.             <span>显示</span>  
50.             <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">  
51.                 <option value="20">20</option>  
52.                 <option value="50">50</option>  
53.                 <option value="100">100</option>  
54.                 <option value="200">200</option>  
55.             </select>  
56.             <span>条，共${pages.count}条</span>  
57.         </div>  
58.           
59.         <div class="pagination" targetType="navTab" totalCount="${pages.count}" numPerPage="${pages.pageSize}" pageNumShown="10" currentPage="${pages.pageNo}"></div>  
60.   
61.     </div>  
62. </div>  

重点是

[html] view plain copy

1. <input type="hidden" name="orderField"       value="${param.orderField}" />  
2. <input type="hidden" name="orderDirection"  value="${param.orderDirection}" />  
3.   
4. 要和Action的属性对上  

[html] view plain copy

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

Action 层

[java] view plain copy

1. package com.web.action;  
2.   
3. import javax.annotation.Resource;  
4. import org.springframework.context.annotation.Scope;  
5. import org.springframework.stereotype.Controller;  
6.   
7. import com.web.model.User;  
8. import com.web.service.UserService;  
9.   
10. /** 
11.  *  
12.  * @author Administrator 
13.  * 
14.  */  
15. @Controller()  
16. @Scope("prototype")  
17. public class UserAction extends BaseAction {  
18.               
19.       
20.             private User  user = new User();  
21.             @Resource  
22.             private UserService userService;  
23.             private String orderField;  
24.             private String orderDirection;  
25.       
26.             /** 
27.              * 查询用户 
28.              * @return 
29.              */  
30.             public String searchUser(){  
31.                 pages = userService.searchUser(pages.getPageNo(), pages.getPageSize(), user, orderField ,orderDirection);  
32.                 return RESULT;  
33.             }  
34.               
35.               
36.               
37.               
38.             public User getUser() {  
39.                 return user;  
40.             }  
41.   
42.             public void setUser(User user) {  
43.                 this.user = user;  
44.             }  
45.   
46.             public UserService getUserService() {  
47.                 return userService;  
48.             }  
49.   
50.             public void setUserService(UserService userService) {  
51.                 this.userService = userService;  
52.             }  
53.   
54.   
55.   
56.   
57.             public String getOrderField() {  
58.                 return orderField;  
59.             }  
60.   
61.   
62.   
63.   
64.             public void setOrderField(String orderField) {  
65.                 this.orderField = orderField;  
66.             }  
67.   
68.   
69.   
70.   
71.             public String getOrderDirection() {  
72.                 return orderDirection;  
73.             }  
74.   
75.   
76.   
77.   
78.             public void setOrderDirection(String orderDirection) {  
79.                 this.orderDirection = orderDirection;  
80.             }  
81.               
82. }  

重点是 

[java] view plain copy

1. private String orderField;  
2. private String orderDirection;  
3.   
4. 一般写到BaseAction中就行了  

Service层

[java] view plain copy

1. package com.web.service.impl;  
2.   
3. import com.dwz.util.Pages;  
4. import org.springframework.stereotype.Service;  
5. import javax.annotation.Resource;  
6. import com.web.model.User;  
7. import com.web.dao.UserDao;  
8. import com.web.service.UserService;  
9.   
10.   
11. @Service("userService")  
12. public class UserServiceImpl implements UserService {  
13.       
14.     @Resource  
15.     private UserDao userDao;  
16.       
17.       
18.     @Override  
19.     public User getUser(int id) {  
20.         return userDao.get(id);  
21.     }  
22.       
23.     @Override  
24.     public void addUser(User user) {  
25.          userDao.insert(user);  
26.     }  
27.       
28.     @Override  
29.     public void updateUser(User user) {  
30.          userDao.update(user);  
31.     }  
32.       
33.     @Override  
34.     public void deleteUser(int id) {  
35.          userDao.delete(id);  
36.     }  
37.       
38.     @Override  
39.     public void reportUser(User user) {  
40.          userDao.insertOrUpdate(user ,user.getId());  
41.     }  
42.   
43.     @Override  
44.     public Pages searchUser(int pageNo ,int pageSize ,User user , String orderField ,String orderDirection){  
45.            String where = " where 1 = 1";  
46.            if(orderField!=null&&!orderField.trim().equals("")){  
47.                if(orderDirection==null||orderDirection.trim().equals("")){  
48.                    orderDirection = "asc";  
49.                }  
50.                  
51.                where +=" order by "+orderField +" "+orderDirection;  
52.            }  
53.            return userDao.listInPages(pageNo, pageSize, where);  
54.     }  
55.       
56.               
57. }  

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

效果图

转载请标明出处 ： http://blog.youkuaiyun.com/jiweigang1/article/details/7771597