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

来源：互联网发布：as3与js交互编辑：程序博客网时间：2024/04/30 09:13

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

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

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

JSP 页面

[html] view plaincopy
<%@ 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>  

重点是

[html] view plaincopy
<input type="hidden" name="orderField"       value="${param.orderField}" />  
<input type="hidden" name="orderDirection"  value="${param.orderDirection}" />  
  
要和Action的属性对上  

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

Action 层

[java] view plaincopy
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;  
            }  
              
}  

重点是

[java] view plaincopy
private String orderField;  
private String orderDirection;  
  
一般写到BaseAction中就行了  

Service层

[java] view plaincopy
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);  
    }  
      
              
}  

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

效果图

0 0