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插件的服务端分页获取数据。
jquery datatable如何动态分页的更多相关文章
- jquery datatable 获取当前分页的数据
使用jquery datatable 遇到分页分别求和时,找了半天才找到获取当前分页数据的方法,以此总结 var table=$('#example').DataTable( { "pagi ...
- jquery动态分页
最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...
- JQuery Datatable用法
原文出处:http://sgyyz.blog.51cto.com/5069360/1408251 目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求 ...
- jQuery Datatable 转载
jQuery Datatable 实用简单实例 时间 2014-05-08 10:44:18 51CTO推荐博文 原文 http://sgyyz.blog.51cto.com/5069360/14 ...
- jquery datatable使用简单示例
目标: 使用 jQuery Datatable 构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. Query ...
- asp.net mvc bootstrap datatable 服务端分页
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ...
- asp.net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】
datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载 密码:0ea1 先上图[ jqueryui风格] ...
- Datatable+Springmvc+mybatis(分页+排序+搜索)_Jquery
一.简介 通过Jqury的Datatable插件,构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时, jQuery Datatable 强大的功能支持:排序,分页,搜索等. 二.前台分 ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
随机推荐
- git 相关流程和报错解决
git 相关流程: 预先配置: gitroot $ git config user.name XXXgitroot $ git config user.email XXX@XXX.com git re ...
- Chrome:不受信任的证书----openssl签发带Subject Alternative Name的证书
Chrome下自签名证书提示无效的问题 发现chrome验证证书很严格,必须带有Subject Alternative Name.签发csr时,修改openssl.cnf : vi /etc/ssl/ ...
- SQL存储实现将JSON自动转化成SQL数据列
CREATE PROCEDURE sp_GetJsonFields ( @Json VARCHAR(MAX) ) AS BEGIN SELECT @Json=REPLACE(@Json,'{','') ...
- 关于OpenGPU.org
今天是心情沉重的一天. OpenGPU.org,作为当年中国图形学界首屈一指的论坛,曾经创造过日访问破万的记录,而且汇聚了中国所有的图形行业的精英,大家畅所欲言,为整个中国图形学业界分享了无数宝贵的资 ...
- linux查看实时日志命令
tail -f localhost_access_log.2018-12-11.txt(当前时间)今天的实时日志,操作一下系统,就会报出相应的日志
- 【PHP】使用phpoffice/phpexcel导入导出数据
本例以thinkphp5.1为例 包地址: https://packagist.org/packages/phpoffice/phpexcel 使用: composer require phpoffi ...
- .net core 2.2 EF oracle db first
Nuget控制台: Install-Package log4net Install-Package Newtonsoft.Json Install-Package Autofac Install-Pa ...
- Swift编码总结9
1.Swift限制textField输入位数为10位: func textField(_ textField: UITextField, shouldChangeCharactersIn range: ...
- go 代码玩耍
//小游戏 num := rand.Intn() var input int fmt.Println("请输入数字") fmt.Scanf("%d", & ...
- .NetCore中EFCore的使用整理(三)-关联表操作
一.查询关联表数据 StudyAboard_TestContext _context = new StudyAboard_TestContext(); CrmRole role = _context. ...