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

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

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

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


JSP 页面


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

重点是

  1. <inputtype="hidden"name="orderField"value="${param.orderField}"/>
  2. <inputtype="hidden"name="orderDirection"value="${param.orderDirection}"/>
  3. 要和Action的属性对上
  1. <c:iftest='${param.orderField=="name"}'>class="${param.orderDirection}"</c:if>
  2. 用来切换图标点击时切换排序类型

Action 层

  1. packagecom.web.action;
  2. importjavax.annotation.Resource;
  3. importorg.springframework.context.annotation.Scope;
  4. importorg.springframework.stereotype.Controller;
  5. importcom.web.model.User;
  6. importcom.web.service.UserService;
  7. /**
  8. *
  9. *@authorAdministrator
  10. *
  11. */
  12. @Controller()
  13. @Scope("prototype")
  14. publicclassUserActionextendsBaseAction{
  15. privateUseruser=newUser();
  16. @Resource
  17. privateUserServiceuserService;
  18. privateStringorderField;
  19. privateStringorderDirection;
  20. /**
  21. *查询用户
  22. *@return
  23. */
  24. publicStringsearchUser(){
  25. pages=userService.searchUser(pages.getPageNo(),pages.getPageSize(),user,orderField,orderDirection);
  26. returnRESULT;
  27. }
  28. publicUsergetUser(){
  29. returnuser;
  30. }
  31. publicvoidsetUser(Useruser){
  32. this.user=user;
  33. }
  34. publicUserServicegetUserService(){
  35. returnuserService;
  36. }
  37. publicvoidsetUserService(UserServiceuserService){
  38. this.userService=userService;
  39. }
  40. publicStringgetOrderField(){
  41. returnorderField;
  42. }
  43. publicvoidsetOrderField(StringorderField){
  44. this.orderField=orderField;
  45. }
  46. publicStringgetOrderDirection(){
  47. returnorderDirection;
  48. }
  49. publicvoidsetOrderDirection(StringorderDirection){
  50. this.orderDirection=orderDirection;
  51. }
  52. }
重点是
  1. privateStringorderField;
  2. privateStringorderDirection;
  3. 一般写到BaseAction中就行了

Service层

  1. packagecom.web.service.impl;
  2. importcom.dwz.util.Pages;
  3. importorg.springframework.stereotype.Service;
  4. importjavax.annotation.Resource;
  5. importcom.web.model.User;
  6. importcom.web.dao.UserDao;
  7. importcom.web.service.UserService;
  8. @Service("userService")
  9. publicclassUserServiceImplimplementsUserService{
  10. @Resource
  11. privateUserDaouserDao;
  12. @Override
  13. publicUsergetUser(intid){
  14. returnuserDao.get(id);
  15. }
  16. @Override
  17. publicvoidaddUser(Useruser){
  18. userDao.insert(user);
  19. }
  20. @Override
  21. publicvoidupdateUser(Useruser){
  22. userDao.update(user);
  23. }
  24. @Override
  25. publicvoiddeleteUser(intid){
  26. userDao.delete(id);
  27. }
  28. @Override
  29. publicvoidreportUser(Useruser){
  30. userDao.insertOrUpdate(user,user.getId());
  31. }
  32. @Override
  33. publicPagessearchUser(intpageNo,intpageSize,Useruser,StringorderField,StringorderDirection){
  34. Stringwhere="where1=1";
  35. if(orderField!=null&&!orderField.trim().equals("")){
  36. if(orderDirection==null||orderDirection.trim().equals("")){
  37. orderDirection="asc";
  38. }
  39. where+="orderby"+orderField+""+orderDirection;
  40. }
  41. returnuserDao.listInPages(pageNo,pageSize,where);
  42. }
  43. }

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


效果图

DWZ (JUI) 教程 DWZ table 分页排序教程_第1张图片


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

你可能感兴趣的:(table)