一、
通常情况下，DataTables（Datatables是一款具有高级交互功能的jQuery表格插件）只用来展示PC端Web网页的大批量数据；但如果你想在移动端使用DataTables的话，也是可以的。因为DataTables能够满足移动端表格插件的最基本的要求——支持下拉加载！
我们先来看一下效果图，第一张为数据加载前的样子——表头为商品、单号等，内容区域被密密的斜线填充着（就好像沥沥淅淅的小雨，被风吹斜了腰身）：
第一张为下拉加载数据后的样子——密密斜织的线条不见了，取而代之的是需要展示的数据：
二、
是不是感觉还不错？DataTables下拉刷新的功能怎么实现呢？
要想使DataTables具有下拉刷新的功能，我们需要借助一款插件——Scroller（滚轮）——一款专门为DataTables量身定做的渲染插件，允许DataTables在整个屏幕上快速地呈现大批量数据。
我们来看一下实现过程：
第一步，在页面中添加Scroller插件的CSS文件和JavaScript文件：
<link href="https://cdn.datatables.net/scroller/1.5.1/css/scroller.bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.5.1/js/dataTables.scroller.min.js"></script>
第二步，在DataTables初始化的时候添加Scroller支持：
$("#myTable").DataTable({ "processing": false,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个) "serverSide": true,// 服务器端端分页 "paging": true,// 表格允许分页 "lengthChange": false,//不允许用户改变表格每页显示的记录数 "info": false,//不显示表格的信息 "searching": false,//不允许Datatables开启本地搜索 "deferRender" : true,// 控制表格的延迟渲染，可以提高初始化的速度 "scrollX" : true,// 允许表格横向滚动 "stateSave": true,// 保存状态 - 在页面重新加载的时候恢复状态（页码等内容） "scrollCollapse" : true,// 当显示更少的记录时，允许表格减少高度 "scrollY": 200,// 行数的累加高度超过200px时允许垂直滚动 "scroller": true,// 开启下拉加载功能 "ajax": { "url": "otm/order/list?p=self", "type": "POST", }, "columnDefs" : [// 定义列 { targets : 0, data : "scode", title : "商品", }, { targets : 1, "data" : "id", title : "单号", }, // 其他列省略 ], });
三、
Scroller是怎么实现DataTables的下拉加载呢？
在DataTables初始化的时候，我们可以看到以下4个重要的参数，它们与Scroller息息相关：
$('#myTable').dataTable( { ajax: '/api/data', scrollY: 200, deferRender: true, scroller: true } );
其中scrollY:200定义了垂直方向上允许出现滚动条的高度，也就是说，当显示的数据行数累加的高度超出200px时，DataTables就会出现垂直滚动条，以便用户通过滚动条来加载更多的数据。在PC端的Web网页上，滚动条一般是可见的，而在移动端的Web网页上，滚动条是默认隐藏的，但可以通过滑动屏幕来替代滚动条的功能；Scroller的下拉刷新就利用这一点，它在屏幕上绘制一个高度为scrollY指定高度的容器，这个容器给用户的视觉印象是整个DataTables表格都是可见的；然后，当用户滚动当前容器时，Scroller就会自动触发DataTables的分页功能，从而获取更多数据。
四、
Scroller具有以下优良的特征：
快速，Scroller的目标就是使DataTables在渲染大型数据集时更快；
兼容，Scroller能和deferRender（延迟渲染）完美协作，从而获得更快的速度；
方便，Scroller能和stateSave（保存状态）集成，从而在页面重载时保存之前滚动条的位置。
综上所述，Scroller是一款优秀的插件。如果你要在移动端使用DataTables来展示大批量数据时，请了解一下Scroller吧！
