jquery datatable如何动态分页

jquery datatable如何动态分页,第1张

一、分页

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

$(p).pagination({

pageSize:defaultPageSize, //每页显示的记录条数,默认为10

pageList:[5, 10, 15], //可以设置每页记录条数的列表

beforePageText:'第', //页数文本框前显示的汉字

afterPageText:'页共 {pages} 页',

displayMsg:'当前显示 {from} - {to} 条记录 共 {total} 条记录',

showRefresh:false,

onSelectPage:function(pageNumber,pageSize){

queryList()

}

})

jquery动态实现表格分页的方法是利用自带的分页插件jQuery.page.js。

下面是使用方法:

$(".tcdPageCode").createPage({

      pageCount:10,

      current:1,

      backFn:function(p){

          //单击回调方法,p是当前页码

      }

  })

  pageCount:总页数

  current:当前页

实现分页的tab如下:

<div class="tcdPageCode">

<span class="disabled">上一页</span>

<span class="current">1</span>

<a href="javascript:" class="tcdNumber">2</a>

<a href="javascript:" class="tcdNumber">3</a>

<a href="javascript:" class="tcdNumber">4</a>

<span>...</span>

<a href="javascript:" class="tcdNumber">6</a><a href="javascript:" class="nextPage">下一页</a></div>

实现效果:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/6667108.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-26
下一篇 2023-03-26

发表评论

登录后才能评论

评论列表(0条)

保存