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实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
Javascript 匿名函数及其代码模式原理
Mar 19 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js 获取时间间隔实现代码
May 12 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
微信小程序实现上传照片代码实例解析
Aug 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实现链结人气统计
2006/10/09 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
js常用代码段整理
2011/11/30 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python抖音表白程序源代码
2019/04/07 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
为什么相对PHP黑python的更少
2020/06/21 Python
Python发送邮件实现基础解析
2020/08/14 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
统计员岗位职责
2013/11/14 职场文书
身边的榜样活动方案
2014/08/20 职场文书
医德医风个人总结
2015/02/28 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers