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 14 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 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 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP输入流php://input介绍
2012/09/18 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
来自qq的javascript面试题
2010/07/24 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
python实现推箱子游戏
2020/03/25 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python银行系统实战源码
2019/10/25 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
银行资信证明
2015/06/17 职场文书
python中的None与NULL用法说明
2021/05/25 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python