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 相关文章推荐
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
简单的Jquery全选功能
Nov 07 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Vue实现剪切板图片压缩功能
Feb 04 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中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
PHP中SESSION过期设置
2021/03/09 PHP
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python的re模块应用实例
2014/09/26 Python
使用python开发vim插件及心得分享
2014/11/04 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Selenium的使用详解
2018/10/19 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
python 实现字符串下标的输出功能
2020/02/13 Python
什么是python的id函数
2020/06/11 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
检讨书怎么写
2015/01/23 职场文书
钢琴师观后感
2015/06/12 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书