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

一直很忙 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 οnsubmit="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" οnchange="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);
	}
	
			
}

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

效果图

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