DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件-阿里云开发者社区

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

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

简介: DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件
+关注继续查看

一、


通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只用来展示PC端Web网页的大批量数据;但如果你想在移动端使用DataTables的话,也是可以的。因为DataTables能够满足移动端表格插件的最基本的要求——支持下拉加载!


我们先来看一下效果图,第一张为数据加载前的样子——表头为商品、单号等,内容区域被密密的斜线填充着(就好像沥沥淅淅的小雨,被风吹斜了腰身):




第一张为下拉加载数据后的样子——密密斜织的线条不见了,取而代之的是需要展示的数据:


image.png

二、


是不是感觉还不错?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吧!



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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10084 0
未能正确加载“VSTS for Database Professionals Sql Server Data-tier Application”包。
        今天费了九牛二虎之力,重转好了vs2010之后,打开解决方案,报出下面的错误: --------------------------- Microsoft Visual Studio --------------------------- 未能正确加载“VSTS for Database Professionals Sql Server Data-tier Applica
1245 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13890 0
《一切皆是映射:代码的本质》Java 动态读取源代码,并编译 & 加载执行
动态的执行一段简单代码,采用生成java文件,调用javac编译,反射执行的方式。 使用输入输出流(或者你说的可能是要用反射得到程序结果来解析)解析做出*.Java文件。
934 0
SAP Spartacus 的 Above-the-Fold Loading 加载机制
SAP Spartacus 的 Above-the-Fold Loading 加载机制
11 0
iOS开发UI篇—在UItableview中实现加载更多功能
一、实现效果 点击加载更多按钮,出现一个加载图示,三秒钟后添加两条新的数据。                        二、实现代码和说明 当在页面(视图部分)点击加载更多按钮的时候,主页面(主控制器)会加载两条数据进来。
649 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11889 0
ios整理(六)关于用富文本在tableview的cell去加载html字符串的优化方案
ios整理(六)关于用富文本在tableview的cell去加载html字符串的优化方案1.相信用iOS系统的类去加载html字符串很多人第一反应就是 NSString *contens = @"1231我给你数点这里";NSData *data = [contens dataUsingEncod...
1794 0
+关注
沉默王二
微信搜索「沉默王二」,回复关键字「00」获取硬核计算机基础资料。
1084
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载