DWZ table的原生分页浅谈

最近在项目开发当中很少会用到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分页今天就介绍到这里。

赞 (0)

相关推荐

  • bootstrap table 服务器端分页例子分享

    1,前台引入所需的js 可以从官网上下载 复制代码 代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么 设置post获取不了 url: url, cache: false, height: 400, striped: tru

  • 利用js制作html table分页示例(js实现分页)

    利用js制作html table分页示例(js实现分页)

    有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript">            var pageSize = 15;    //每页显示的记录条数             var curPage=0;        //当前页             var lastPage;        //最后页             var

  • JS代码实现table数据分页效果

    JS代码实现table数据分页效果

    第一个:实现的很常见很简单的显示页数翻页 效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <script src="js/jquery-...js"></script> <script src="js/demo.js

  • 动态生成table并实现分页效果心得分享

    前台代码: 复制代码 代码如下: <table style="width: 100%;"> <tr> <td> 搜索字: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="搜索&

  • 对数据进行分页显示到table中的实现方法

    对数据进行分页显示到table中的实现方法

    我最先用jframe编程的时候写的比较简单,只是先查询到所有记录,再根据当前页码筛选出当前页的记录,返回的小集合可以直接显示到table上. import java.util.ArrayList; import java.util.List; import com.yu.entity.User; public class PageController { private List<User> bigList=new ArrayList<User>(); //大集合,从外界获取 pr

  • DWZ table的原生分页浅谈

    最近在项目开发当中很少会用到DWZ原生的table分页,往往是使用jqgrid or grid这种第三方数据绑定的表格插件,如今在项目中要求了,就必须要使用DWZ自带的table了 接下来看一段代码,我会给大家详细介绍DWZ中table分页的使用方式,以下是在MVC中实现的方式. ?<div class="pagination" targetType="navTab" totalCount="@ViewBag.totalCount" num

  • 浅谈layui 数据表格前后台传值的问题

    1.1查询 <script> layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : 'controller路径', { field: 'id', title: 'id'}, { field: 'username', title: '用户名'}, { field: 'sex', title: 性别'}, { field: 'city', title: '城市'}

  • 浅谈MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载表格!!! function LoadGrid() { $('#roleGrid').datagrid({ width: 900, striped: true, //交替条纹 fitColumns: true, //防止水平滚动 fit: true,//自动补全 iconCls: "icon-sav

  • 浅谈layui框架自带分页和表格重载的接口解析问题

    首先要了解框架分页自带的参数有哪些,特别是注意参数名称要和后台一致! **需要注意的是layui框架的数据解析格式问题,data必须是个数组对象的形式才能正常解析否则会很麻烦(亲测过非正常解析,手写js手动动态添加表格) data 格式例如: { "count": 11, "code": 0, "msg": "", "data": [ { "id": "1", &qu

  • 浅谈layui分页控件field参数接收对象的问题

    第一次使用layui分页控件,遇到的问题..field: 'type.typeName' 获取不到值. 页面代码 table.render({ elem: '#bookTable' ,height: 'full-20' ,url: '/admin/getBook' //数据接口 ,request: { pageName: 'begin' //页码的参数名称,默认:page ,limitName: 'length' //每页数据量的参数名,默认:limit } ,page: true //开启分页

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • 浅谈JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else

  • 浅谈原生JS中的延迟脚本和异步脚本

    一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当浏览器解析到</html> 标签后才会执行代码.在HTML5规范中,defer属性中适用于外部脚本. 而家了defer  的脚本文件会比DOMContentLoaded事件触发前执行. 二.异步脚本 async HTML5为<script>添加了个async属性.这个属性与defer属

  • 浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数 注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr

  • 浅谈js原生拖放

    可拖动 网页中的图像.链接和文本是浏览器默认可以被拖动的,HTML5 为所有的HTML元素都提供了一个draggable属性,当这个属性的值为true的时候,元素被视为可以拖动. 拖动图像或者链接时,将鼠标放在图像或者链接上,按住鼠标不放就可以拖动它.拖动文本时,要先选中文本,然后可以像拖动图像一样拖动选中的文本. 被拖动的元素事件 拖动图片时依次触发:drapstart,drag,dragend事件.这三个事件的目标都是被拖动的元素. 按下鼠标键并开始移动鼠标时,会在被拖放元素上触发drags

随机推荐