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 复制数组实现代码
Nov 26 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
Js四则运算函数代码
Jul 21 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
javascript this详细介绍
Sep 19 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 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三元运算符的结合性介绍
2012/01/10 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
javascript中length属性的探索
2011/07/31 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
python-opencv颜色提取分割方法
2018/12/08 Python
python面试题小结附答案实例代码
2019/04/11 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
成功的酒店创业计划书
2013/12/27 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python