展开全部

一、分页

分页的基本思想是根据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插件的服务端分页获取数据。

jquery datatable如何动态分页的更多相关文章

  1. jquery datatable 获取当前分页的数据

    使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...

  2. jquery动态分页

    最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...

  3. JQuery Datatable用法

    原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...

  4. jQuery Datatable 转载

    jQuery Datatable 实用简单实例 时间 2014-05-08 10:44:18  51CTO推荐博文 原文  http://sgyyz.blog.51cto.com/5069360/14 ...

  5. jquery datatable使用简单示例

    目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...

  6. asp.net mvc bootstrap datatable 服务端分页

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...

  7. asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  8. Datatable+Springmvc+mybatis(分页+排序+搜索)_Jquery

    一.简介 通过Jqury的Datatable插件,构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. 二.前台分 ...

  9. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

随机推荐

  1. ubuntu iptables重启生效:

    ubuntu iptables重启生效:save roles to a file:iptables-save >/etc/iptables.roles edit /etc/network/int ...

  2. Web容器中DefaultServlet详解 JspServlet DefaultServlet

    Web容器中DefaultServlet详解 https://blog.csdn.net/qq_30920821/article/details/78328608 Web容器中DefaultServl ...

  3. angular的路由例子

    app.routing.module.ts里面,关键部分 const routes: Routes = [ { path: '', redirectTo : 'c3/c2/mmc', pathMatc ...

  4. vscode配置python之settings.json 智能提示

    vscode编写Python的智能提示,搞了好久,参考了各种网上配置,如下,备份方便自己查找. { "workbench.iconTheme": "material-ic ...

  5. [转].gitignore文件不起作用的解决方案

    .gitignore文件不起作用的解决方案 觉得有用的话,欢迎一起讨论相互学习~Follow Me 转载地址 https://www.cnblogs.com/liugp/p/10399282.html ...

  6. awk:for循环输出文件名

    简单来说,有file1.txt, file2.txt, file3.txt file1.txt如下: 1 a 4 d d g file2.txt如下: 2 b g 6 9 0 file3.txt如下: ...

  7. 在OpenShift 3.11环境开启多网络平面

    1.整体架构 Multus CNI是OpenShift的容器网络接口(CNI)插件,可将多个网络接口附加到Pod. 通常,在OpenShift中,每个Pod仅具有一个网络接口(除了回送),Multus ...

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息

    背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换, ...

  9. php的工厂模式

    特点 :将调用者和创建者分离,调用者直接向工厂类请求获取调用对象,减少代码耦合,提高系统的维护性和扩展性. <?php // **** 共同接口 **** // interface DB { f ...

  10. nginx过滤access_log中HEAD、OPTIONS请求记录

    网上很多教程说是这样做: if ($request_method = HEAD) { access_log off; } 试了之后是不行的,正确的做法如下: http { map $request_m ...