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:void(0)的作用示例介绍
Oct 28 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
Javascript中this的用法详解
Sep 22 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
javascript实现的简单计时器
Jul 19 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
Vue项目路由刷新的实现代码
Apr 17 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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中一个完整表单处理实现代码
2011/11/10 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
原生JS发送异步数据请求
2017/06/08 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python实现图片筛选程序
2018/10/24 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python super()函数的基本使用
2020/09/10 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
助人为乐模范事迹材料
2014/06/02 职场文书
计生工作先进事迹
2014/08/15 职场文书
2014年党小组工作总结
2014/12/20 职场文书
表扬信格式模板
2015/05/05 职场文书
行政处罚告知书
2015/07/01 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python