DWZ table的原生分页浅谈


Posted in Javascript onMarch 01, 2013

最近在项目开发当中很少会用到DWZ原生的table分页,往往是使用jqgrid or grid这种第三方数据绑定的表格插件,如今在项目中要求了,就必须要使用DWZ自带的table了

接下来看一段代码,我会给大家详细介绍DWZ中table分页的使用方式,以下是在MVC中实现的方式。

?<div class="pagination" targetType="navTab" totalCount="@ViewBag.totalCount" numPerPage="@ViewBag.numPerPage" pageNumShown="@ViewBag.pageNumShown" <BR>currentPage="@ViewBag.currentPage"></div>
 属性介绍

targetType:绑定方式,DWZ这里提供了"navTab" and "dialog"这两种方式,顾名思义就是分页是在标签页上还是弹出层上

totalCount:数据总行数

numPerPage:当前页数据行数

pageNumShown:总页数

currentPage:当前页码

@using (Html.BeginForm("BidPrjList", "TbUnify", null, FormMethod.Post, new { id = "pagerForm" }))
{
    <input type="hidden" name="pageNum" value="1" />
    <input type="hidden" name="numPerPage" value="@ViewBag.numPerPage" />
}

注意DWZ下分页的表单必须加上id="pagerForm"属性,否则不会执行。DWZ中表格的分页实质是将分页的方式以表单提交的形式传递至后台,由后台接收参数,获取分页信息:例如:
Request.Form["numPerPage"]

获取分页信息表单的值就是你在View中pagerForm表单下定义隐藏文本域的name,在后台接收后去请求数据源中分页后的数据,再返回至前台。

而这里存在一个小问题:首次进入此页面时,是无法触发当前分页的的表单提交事件的,所以在上面我定义了ViewBag.numPerPage动态赋值,每页分取多少条数据,前台界面只是将分页样式定义,实质数据没有绑定,所以必须要将前台传递过来的分页信息作为后台数据分页的依据,这样前台的分页才能与数据对接一致,不会造成错乱,这点要注意。

在实际项目的开发当中,我们总会把表格与过滤条件放在一起,DWZ中表格传入限制条件的方式也很简单,如上在分页表单上加入需要传入的隐藏文本域例如:

<input type="hidden" name = "Common_TbUnify_BidPrjList_HtxtPrjName" />

这样在后台就能够接受到传入的过滤条件了。

DWZ 的table分页实质是将当前标签页的数据reload,致使标签页刷新,若限制条件与分页共同使用时,这样就会存在一个问题,页面reload后会使你 的过滤条件丢失,而这里我解决的办法还是在分页的表单中加入隐藏文本域,每次把过滤条件赋值,在后台判断是否为空,是否加入过滤条件,希望大家能够注意这 点。

最后再说一点,在上面介绍了targetType,表示当前分页的方式与分页实质是标 签页的刷新,所以如果我们把包含table的View层作为部分页用异步去进行加载时,就会发现,DWZ的分页控件是不会显示的,也就无法分页,在上面已 经告诉大家每次分页是要指定type的,如果使用$.load或者@Html.Partial都是只能加载出第一页的数据,这也是DWZ中存在缺陷的地方吧,毕竟DWZ的兴起也是近年,还是存在很多问题与BUG的,尤其是他的table分页与数据绑定真心不好用,但是总体来说,DWZ其他组件与样式还是很不错的。

好了关于DWZ table分页今天就介绍到这里。

Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 #Javascript
循环 vs 递归浅谈
Feb 28 #Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 #Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
You might like
在PHP中使用XML
2006/10/09 PHP
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
生成静态页面的PHP类
2006/11/25 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php树型类实例
2014/12/05 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
python写的一个文本编辑器
2014/01/23 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python能做什么 python的含义
2019/10/12 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
网络事业创业计划书范文
2014/01/09 职场文书
高一数学教学反思
2014/02/07 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
进步之星获奖感言
2014/02/22 职场文书
植树造林的宣传标语
2014/06/23 职场文书
关于军训的感想
2015/08/07 职场文书
2016银行招聘自荐信
2016/01/28 职场文书