开发者社区> 沉默王二> 正文

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

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只用来展示PC端Web网页的大批量数据;但如果你想在移动端使用DataTables的话,也是可以的。
+关注继续查看
版权声明:欢迎转载,请注明沉默王二原创。 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程序

在这里插入图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Google Java编程风格规范(2020年4月原版翻译)
Google Java Style Guide 这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则, 我们才认为它符合Google的Java编程风格。 与其它的编程风格指南一样,这里所讨论的不仅仅是编码格式美不美观的问题, 同时也讨论一些约定及编码标准。然而,这份文档主要侧重于我们所普遍遵循的规则,
8 0
Android 打包AAB+PAD(java篇)(上)
AAB Play Asset Delivery 分发模式 资源更新 纹理压缩格式定位 应用版本更新 下载大小上限 针对Java 代码构建
7 0
【React】将 useReducer 应用于 Web Worker,擦出奇妙的火花
有这么一个场景,当加载一个网页时,它突然变得无响应,直到所有的资源完全加载完毕才响应。但是,当资源加载时,用户可能无法执行页面上的某些功能,比如单击、选择或拖动元素。这个时候你可能会想到使用 Web workers帮助我们解决这个问题。
3 0
consul技术分享
上一章《注册中心Eureka》我们介绍了注册中心Eureka,相必大家都对注册中心都有了一定的认识了,在Eureka停止维护之后,Consul就成了其替换方案之一,让我们一起来走进Consul的世界吧!
3 0
Android 打包AAB+PAD(java篇)(下)
Play Core API 集成 安装时分发 快速跟进式分发和按需分发 查看状态 获取有关资源包的下载信息 安装 监控下载状态 下载内容较大 获取资源包 取消请求 移除资源包 获取多个资源包的位置 相关推荐 Android aab打包 Android App Bundle 已取代 APK
5 0
微信小游戏开发实战9-刷新形状
本篇主要内容是为1010游戏中的刷新形状功能的实现。
6 0
微信小游戏开发实战10-检查形状
本篇主要内容:1010游戏中的形状检查以及游戏结束的判断。
4 0
Android 开发规范(转载 Blankj 作品)
摘要 ? 1 前言 ? 2 AS 规范 ? 3 命名规范 ? 4 代码样式规范 ? 5 资源文件规范 ? 6 版本统一规范 ? 7 第三方库规范 ? 8 注释规范 ? 9 测试规范 ? 10 其他的一些规范 1 前言
5 0
Go 函数
函数定义 Go 语言函数定义格式如下: func function_name( [parameter list] ) [return_types] { 函数体 } 以下实例为 max() 函数的代码,该函数传入两个整型参数 num1 和 num2,并返回这两个参数的最大值:
3 0
zookeeper技术分享
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现。 ZooKeeper的目标就是封装好复杂易出错的关键服务,将简单易用的接口和性能高效、功能稳定的系统提供给用户。 ZooKeeper包含一个简单的原语集,提供Java和C的接口。 ZooKeeper代码版本中,提供了分布式独享锁、选举、队列的接口,代码在$zookeeper_home\src\recipes。其中分布锁和队列有Java和C两个版本,选举只有Java版本。
4 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载
http://www.vxiaotou.com