dwz给我们提供了一个很好的列表UI

我对它的分析后将页面分为四个部分

  1. <form id="pagerForm" method="post" action="list_test.php">
  2. <input type="hidden" name="status" value="${param.status}">
  3. <input type="hidden" name="keywords" value="${param.keywords}" />
  4. <input type="hidden" name="pageNum" value="1" />
  5. <input type="hidden" name="numPerPage" value="${model.numPerPage}" />
  6. <input type="hidden" name="orderField" value="${param.orderField}" />
  7. </form>

第一部分,该部分是会随着页面下面提交页面显示条数和跳转页面时提交的参数

该部分可以自己添加相应的影藏参数,比如我们获得的页面是搜索结果页面,如果不讲参数附加在这里,那么当我们点击跳转页面时,会发现已经回到了不带搜索参数的查询结果中了。所以我们可以将搜索值存放在这里。

  1. <form onsubmit="return navTabSearch(this);" action="list_test.php" method="post">
  2. <div class="searchBar">
  3.  
  4. <!--
  5. <ul class="searchContent">
  6. <li>
  7. <label>我的客户:</label>
  8. <input type="text"/>
  9. </li>
  10. <li>
  11. <select class="combox" name="province">
  12. <option value="">所有省市</option>
  13. <option value="北京">北京</option>
  14. <option value="上海">上海</option>
  15. <option value="天津">天津</option>
  16. <option value="重庆">重庆</option>
  17. <option value="广东">广东</option>
  18. </select>
  19. </li>
  20. </ul>
  21. -->
  22. <table class="searchContent">
  23. <tr>
  24. <td>
  25. 我的客户:<input type="text" value="123" name="keyword" />
  26. </td>
  27. <td>
  28. <select class="combox" name="province">
  29. <option value="">所有省市</option>
  30. <option value="1" selected>北京</option>
  31. <option value="2">上海</option>
  32. <option value="3">天津</option>
  33. <option value="4">重庆</option>
  34. <option value="5">广东</option>
  35. </select>
  36. </td>
  37. <td>
  38. 建档日期:<input type="text" class="date" name="time" readonly="true" />
  39. </td>
  40. <td>
  41. <?php
  42. var_dump($_GET);
  43. var_dump($_POST);
  44. ?>
  45. </td>
  46. </tr>
  47. </table>
  48. <div class="subBar">
  49. <ul>
  50. <li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
  51. <li><a class="button" href="demo_page6.html" target="dialog" mask="true" title="查询框"><span>高级检索</span></a></li>
  52. </ul>
  53. </div>
  54. </div>

第二部分,该部分是搜索部分,建议将搜索后,依旧将收索关键字放在这里。这样做方便用户的操作。

  1. <div class="panelBar">
  2. <ul class="toolBar">
  3. <li><a class="add" href="demo_page4.html" target="navTab"><span>添加</span></a></li>
  4. <li><a class="delete" href="demo/common/ajaxDone.html?uid={sid_user}" target="ajaxTodo" title="确定要删除吗?"><span>删除</span></a></li>
  5. <li><a class="edit" href="demo_page4.html?uid={sid_user}" target="navTab"><span>修改</span></a></li>
  6. <li class="line">line</li>
  7. <li><a class="icon" href="demo/common/dwz-team.xls" target="dwzExport" targetType="navTab" title="实要导出这些记录吗?"><span>导出EXCEL</span></a></li>
  8. </ul>
  9. </div>
  10. <table class="table" width="100%" layoutH="150">
  11. <thead>
  12. <tr>
  13. <th width="80"></th>
  14. <th width="120">客户号</th>
  15. <th>客户名称</th>
  16. <th width="100">客户类型</th>
  17. <th width="150">证件号码</th>
  18. <th width="80" align="center">信用等级</th>
  19. <th width="80">所属行业</th>
  20. <th width="80">建档日期</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr target="sid_user" rel="1">
  25. <td>天津农信社</td>
  26. <td>A120113196309052434</td>
  27. <td>天津市华建装饰工程有限公司</td>
  28. <td>联社营业部</td>
  29. <td>29385739203816293</td>
  30. <td>5级</td>
  31. <td>政府机构</td>
  32. <td>2009-05-21</td>
  33. </tr>
  34. </tbody>
  35. </table>

第三部分,具体操作部分

  1. <div class="panelBar">
  2. <div class="pages">
  3. <span>显示</span>
  4. <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
  5. <option value="20">20</option>
  6. <option value="50">50</option>
  7. <option value="100">100</option>
  8. <option value="200">200</option>
  9. </select>
  10. <span>条,共100条</span>
  11. </div>
  12.  
  13. <div class="pagination" targetType="navTab" totalCount="100" numPerPage="20" pageNumShown="10" currentPage="1"></div>
  14.  
  15. </div>

第四部分,分页部分,需要设置页面相关的参数(加粗部分)和下拉框的被选项,这样就完美显示分页效果了。

dwz分页实现分析的更多相关文章

  1. DWZ分页、排序失效小结

    1. 在视图文件中与分页相关的代码段 <form id="pagerForm" method="post" action="w_list.htm ...

  2. row_number() over order by与利用rownum查询分页效率分析

    实际测试: 数据库:70万条数据 查询第10000页,每页10条.row_number() 耗时: 2.2秒rownum 耗时:1.3秒 查询第20000页,每页10条.row_number() 耗时 ...

  3. Sql Server 2012 的新分页方法分析(offset and fetch) - 转载

    最近在分析 Sql Server 2012 中 offset and fetch 的新特性,发现 offset and fetch 无论语法的简洁还是功能的强大,都是相当相当不错的 其中 offset ...

  4. JUI/DWZ 分页 Servlet

    分页介绍 参考:官方用户手册中的"分页组件"         分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签.分页是配合服务器端来处理的, 不是存js做的分页. 因 ...

  5. dwz 分页 bug (选回 combox 第一个值时不执行 onchange)

    先看一下官方的测试: 官方的演示有两个 bug 一个是combox数字一直不变,二是当选回第一个值时不执行 onchange 事件. 经过firebug调试,这是一个bug,传到后台的参数没有得到及时 ...

  6. Sql Server 2012 分页方法分析(offset and fetch)

    最近在分析 Sql Server 2012 中 offset and fetch 的新特性,发现 offset and fetch 无论语法的简洁还是功能的强大,都是相当相当不错的.其中  offse ...

  7. mssql分页原理及效率分析

    下面是常用的分页,及其分页效率分析. 1.分页方案一:(利用Not In和SELECT TOP分页) 语句形式: SELECT TOP 10 * FROM TestTable WHERE (ID NO ...

  8. 浅谈SQL Server数据库分页

    数据库分页是老生常谈的问题了.如果使用ORM框架,再使用LINQ的话,一个Skip和Take就可以搞定.但是有时由于限制,需要使用存储过程来实现.在SQLServer中使用存储过程实现分页的已经有很多 ...

  9. [转]Oracle中使用Rownum分页详细例子

    原文地址:http://www.jb51.net/article/52272.htm 在MySQL中,我们通常都使用limit来完成数据集获取的分页操作,而在Oracle数据库中,并没有类似limit ...

随机推荐

  1. [工具]web开发时自动刷新网页:liveReload

    传统网页开发流程:用sublime text写好代码,运行,发现问题,再回到sublime text修改,运行…如此往复,十分繁琐.今天看到有人(<LiveReload>讓Sublime ...

  2. bzoj1149

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1149 水题..... 直接BFS. #include<cstdio> #inclu ...

  3. Java之Map

    Map 是一种把键对象和值对象映射的集合,它的每一个元素都包含一对键对象和值对象. Map没有继承于Collection接口 从Map集合中检索元素时,只要给出键对象,就会返回对应的值对象. code ...

  4. [转] ubuntu 一些常用软件的安装

    首先说明一下 ubuntu 的软件安装大概有几种方式: 1. deb 包的安装方式deb 是 debian 系 Linux 的包管理方式, ubuntu 是属于 debian 系的 Linux 发行版 ...

  5. JavaScript 滚动页面到指定元素位置

    页面评论功能,当评论较多时,有时须要滚动到评论头部. 能够使用scrollTop方法,加上一点延时动画(animate),可訪问在线演示,代码大体例如以下: <html> <scri ...

  6. JMeter录制脚本

    Jmeter 是一个非常流行的性能测试工具,虽然与LoadRunner相比有很多不足,比如:它结果分析能力没有LoadRunner详细:很它的优点也有很多: l 开源,他是一款开源的免费软件,使用它你 ...

  7. HADOOP集群监控工具AMBARI

    HADOOP集群监控工具AMBARI安装 Apache Ambari是对Hadoop进行监控.管理和生命周期管理的开源项目.它也是一个为Hortonworks数据平台选择管理组建的项目.Ambari向 ...

  8. Ubuntu 14.04根据系统,休眠后不能启动要解决的问题

    简介: 提升Ubuntu制度14.04之后,当系统进入休眠,我们不能再次启动,直接崩溃,凡出了问题? 1.   问题纳入 Ubuntu升级系统14.04之后.通过系统的Power设置休眠时间,在系统进 ...

  9. python网络编程之socket

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  10. Jquery:强大的选择器<二>

    今天跟着资料做了一个示例,为什么我感觉自己做的没书上的好看呢?好吧,我承认自己对css样式只懂一点皮毛,我也不准备深度的去学习它,因为……公司有美工嘛! 这个小示例只是实现了元素的隐藏和显示.元素cl ...