DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

  1. 云栖社区>
  2. 博客>
  3. 正文

DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

沉默王二 2018-09-01 15:23:42 浏览631
展开阅读全文
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523

一、

通常情况下,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吧!


相关文章:

DataTables的serverSide(服务器端分页)怎么实现?注,服务器端是Java程序

在这里插入图片描述

网友评论

登录后评论
0/500
评论
沉默王二
+ 关注