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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
JS 表单验证大全
Nov 23 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
js模拟实现百度搜索
Jun 28 Javascript
vue-router懒加载的3种方式汇总
Feb 28 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遍历目录与文件夹的多种方法详解
2013/11/14 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Javascript实现基本运算器
2017/07/15 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
初步理解Python进程的信号通讯
2015/04/09 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python将txt文件读取为字典的示例
2018/12/22 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
工作失误检讨书范文大全
2014/01/13 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Elasticsearch 批量操作
2022/04/19 Python