zoukankan      html  css  js  c++  java
  • jquery datatable如何动态分页

    一、分页

    分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果。

    这里需要用到datatable插件的几个属性:

    "sEcho":这个属性需要原封不动地传回给datatable,具体的作用我也不清楚,但是根据它值的变化情况来看,好像是一个操作次数的计数(之前我一直把它当做是pageindex来用,结果发现,不论我在datatable中是翻下一页还是翻上一页,它一直在增加。)

    "iDisplayStart":这个属性,根据字面意思理解,就是每段数据开始的行数,比如第一页的数据就是从0开始计,那么它就是0,每页显示的行数是10,那么第二页的第一行的iDisplayStart就是10。

    "iDisplayLength":这个属性就是每页显示的行数。

    然后是数据库操作,只需要从数据库查询其中一段数据,然后输出出来,转成JSON格式,让datatable插件获取。在网上可以找到很多分页的方法,选择了其中一种,使用row_number()的分页的存储过程。具体代码如下(根据sql创建存储过程模板):

    存储过程的两个参数,pageindex表示页索引即当前页码,不懂datatable有没有这项属性,所以是用计算的方法得来的,就是iDisplayStart/iDisplayLength+1。pagesize可以直接从datatable获得。

    服务端的代码,我创建了一个datasource.ashx文件,代码如下:

    DataTableToObjects类的代码如下:

    需要注意的一点:iTotalRecords与iTotalDisplayRecords是两个不同的值,是改变分页栏显示用的参数,这里因为没有考虑数据过滤功能,所以都设置成数据的总的行数。

    然后是客户端的代码,与之前的差不多:

    因为测试,所以只提取了表中的三个字段,并且关闭了数据过滤及排序功能,其中,"bLengthChange"可以设置成true,因为服务端会获取datatable的iDisplayLenth参数,即使每页显示数变化,数据也可以正常获取。

    这样就实现了jquery.datatable插件的服务端分页获取数据。

  • 相关阅读:
    Spring中的destroy-method方法
    github Pull Request合入全流程介绍
    vue-router动态路由设置参数可选
    github上fork原项目,如何将本地仓库代码更新到最新版本?
    github的pull Request使用
    vue2.X版本vue-cli生成项目后运行失败,报错信息为getaddrinfo ENOTFOUND localhost
    npm在linux即mac下更新时报错
    数组Array和字符串String的indexOf方法,以及ES7(ES2016)中新增的Array.prototype.includes方法
    less的使用总结
    ssh连接github连不上
  • 原文地址:https://www.cnblogs.com/showcase/p/11547091.html
Copyright © 2011-2022 走看看