使用DataTables实现服务器端分页

DataTables

DataTables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

• 分页，即时搜索和排序
• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各样的扩展: Editor, TableTools, FixedColumns ……
• 丰富多样的option和强大的API
• 支持国际化
• 超过2900+个单元测试
• 免费开源

DataTables

---

                

                    

                      

                       
Column 1
                       
Column 2
                       
Column 3
                       
Column 4
                      
     
                    
                 

DataTables自带分页的功能 $("#table_id_example").DataTable(“省略...”)//只需一句，意思就是：请求获得所有的数据利用DataTables进行分页。看起来DataTables真的是一个好东西呀！这样说有了DataTables还需要后端分页干嘛呢？
但是会存在一个这样的一个问题，请小伙伴们好好思考下。当碰到数据量巨大的情况下，这对于很多系统或者网页来说都是家常的事。一次请求上万条数据最后的显示效果虽然是一样的，也都能展示出相同的数据结果，但是对于时间效率上来说那就天差地别了，没有进行后端分页的话，用户可能会在数据量极大的情况下先疯狂。这样说DataTables还是一个不行的插件。那就大错特错了，那一帮搞代码的，可是贼精得咧。早就为DataTables后端分页铺好了道路。下面我们就言归正传了哈，开始DataTables后端分页的实现步骤。

---

步骤

1.引入DataTables所依赖的css文件和js文件，还有jquery
jquery.dataTables.min.css或者jquery.dataTables.css
jquery.dataTables.min.js或者jquery.dataTables.js
jquery.min.js
下载地址

下载dataTables.css和dataTables.js

或者：在DataTables CDN上，可以使用下面前两个两个文件，最后一个是jquery。

``

2.这里简单介绍下本次demo的后端情况，首先业务是为了展示一个汽车信息的列表，数据库总共有35条记录数。后端实现就不再过分描述，这里前台传两个参数，页大小pagesize与当前页码page，如果前端不传这两个参数，默认当前页码为第1页，页大小为10。

数据库数据

3.前端代码html与js

    
    
    
 
    
 
   




    

    

        
编号
        
品牌
        
价格（万元）
        
颜色
    
    

到此，服务器后端分页的前端代码结束。

其中：

• serverSide: true, //启用服务器端分页，要进行后端分页必须的环节
• ajax: function (data, callback, settings) {}，//添加ajax属性
  是必须的两个步骤,也是最关键的步骤。

4.页面展示与数据

数据量10条

这里前端发送ajax请求，页大小pagesize为10（ var pagesize = data.length;），当前页码page为10，如点击

则改变当前页码，而相应的当前页码page（var page = (data.start) / data.length + 1;）。
在浏览器控制台中
pagination:{pageCount: 4, pagesize: 10, page: 1, totalCount: 35}

• pageCount:共分为几页
• pagesize:页大小
• page:当前页码
• totalCount:总记录数，后台必须返回
• carList:数据列表

再看一个页大小为50的的页面：

页大小50，当前只有一页

---

到此，精简版dataTables的服务器端分页demo算是基本完成。
更多，更好的自行封装请求和返回数据的零耦合服务端分页请移步中文官网
天天好心情哦！！！