文档章节

datatables——数据的服务器端处理

百度得来终觉浅_
 百度得来终觉浅_
发布于 2017/07/24 15:39
字数 1127
阅读 10
收藏 0

官网:http://www.datatables.NET/

中文网:http://dt.thxopen.com/

问题:在处理太多dom数据或者ajax一次性把数据获得后,datatables表现不是很满意。原因使一次性获得数据后,浏览器需要渲染数据,创建tr,所以数据越多,速度就越慢。为了解决这个问题,datatables提供了服务器模式,把本来客户端所做的事情交给服务器去处理,比如排序、分页、过滤。对于客户端来说这些操作都是比较消耗资源的。

当我们开启服务器模式的时侯,每次绘制表格的时侯,datatables会给服务器发送一个请求(包括当前分页、排序、搜索等)。datatables会向服务器发送大量的变量去执行所需要的处理,然后在服务器拼好相应的数据返回给datatables。

开启服务器端模式需要设置serverSide为true,并且配置ajax。

下面介绍一下主要的配置选项:

发送参数:

draw——number类型——请求次数计数器,每次发送给服务器后原封返回,因为请求是异步的,为了确保每次请求都能对应到服务器返回到的数据。

start——number类型——第一条数据的起始位置,当前数据集的开始点(0为基数)。

length——当前页面要显示的数据条数

search——全局的搜索条件,针对于那些searchable设置为true的列。

 

返回的数据:

draw——number类型——请求计数器,客户端发送的draw是多少,服务器就返回多少。出于安全的考虑,强烈建议将draw转换为整数后再返回,而不是纯粹的接受然后返回,这是为了防止跨站点脚本攻击(XSS)。

recordsTotal——number类型——未经过过滤的数据记录数(数据库里总共有多少条记录)。

recordsFiltered——number类型——过滤后的总的记录数,是所有数据经过过滤筛选后的数量,而不仅仅是当前页面要显示的数据数量。

data——Array类型——要展示在表格中的数据,可以是一个对象数组,也可以是一个纯数组。区别在于,如果是纯数组的话,前端就不需要用columns绑定数据,会自动按照顺序去显示,每个数组中的数据就是一行;如果是对象数组,前端则需要使用columns绑定数据才能正常显示。

 

ajax接收三种类型的参数:一种是string,用来设置获取数据的url,一种是对象(和jQuery.ajax对象的定义类似),还有一种是函数,用于自定义获取数据的功能。

$('#table').DataTable({

ajax : '/xx/yy/data.json',

})

$('#table').DataTable({

'ajax' : function(data,callback,settings){

callback(

JSON.parse(localStorage.getItem('dataTablesData'));

);

}

})

当ajax属性是一个函数时,我们可以完全自己控制ajax请求,返回的数据都可以不受datatables的影响。事实上你可以使用非ajax,比如说直接使用本地存储。你可以直接从本地存储中获取数据然后交给callback处理。

$('#table').dataTable({

'ajax':{

'url' : 'datasearch.json',

'data':{

'user_id' : 451,

}

}

});

上面的ajax对象其实是参考的jquery中的ajax对象,这样用起来就比较熟悉。 但是要注意的是,ajax.data有两种数据类型,一种是对象object,还是一种是函数function。

 

当ajax.data是一个对象时,ajax.data用于扩展datatables构造内部对象,将额外的,静态的参数传递给服务器,相当于是对原有请求参数对象的一种扩展extention。

$('#example').dataTable({

    "ajax" : {

        "url" : "data.json",

        "data" : {    //能添加一些额外的静态参数给后台

            "user_id" : 123,

            "app_id": 111

        }

    }

});

当ajax.data是一个函数时,data.ajax选项可以用于修改由datatables内部构造的原始数据或者完全取代这些数据,然后把自定义的请求数据ajax发送到服务器,在每次datatables请求服务器的时侯都可以动态计算提交的参数。具体有以下两种操作方法:

//通过操作请求数据对象d

$('#example').dataTable({

    "ajax" : {

        "url" : "data.json",

        "data" : function(d){    //这个‘d’就是未扩充前的请求数据对象

            d.extra_search = $('#extra').val();

        }

    }

});

 

//通过返回一个对象来改变请求中的数据对象

$('#example').dataTable({

    "ajax" : {

        "url" : "data.json",

        "data" : function(d){    

         return $.extend({},d,{

            "extra_search" : $('#extra').val();

        });

       }

    }

});

//以JSON格式提交请求

$('#example').dataTable({

    "ajax" : {

        "url" : "data.json",

        "data" : function(d){    

             return JSON.stringify(d);

        }

    }

});

本文转载自:http://blog.csdn.net/zhuyunhe/article/details/49273301

百度得来终觉浅_
粉丝 1
博文 4
码字总数 551
作品 0
福州
私信 提问
DataTables能实现移动端的下拉加载吗?可以,需要借助一下Scroller插件

版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/82287523 一、 通常情况下,DataTables(Datatables是一款具有高级交互功能的jQuery表格插件)只...

qing_gee
2018/09/01
0
0
DataTables_详细使用方法

jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

喵王不瞌睡
2015/05/02
2.8K
1
dataTables-使用详细说明整理

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQuery-datatables] 1、DataTables的默认配置 $(...

ahl123
2018/07/02
0
0
DataTables 使用配置

一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataT......

谢锡鹏
2015/01/19
1K
0
bootstrap中使用datatables

今天大象研究了下datatables表格,下面来介绍下datatables,我是在bootstrap中使用的,引入必须的JS后就可以开始使用了,首先表格的HTML <div class="row-fluid"> datatables增删改查的实...

别人说我名字很长
2014/03/28
49.3K
2

没有更多内容

加载失败,请刷新页面

加载更多

面试题必备-web页面基础

html标签是由<>包围的关键词 html标签是成对出现的 有部分标签是没有结束标签的,叫单标签, 页面中所有的内容,都是要放在HTML标签中的 HTML标签分三部分: 标签名称 标签内容 标签属性 HT...

达达前端小酒馆
今天
11
0
OSChina 周二乱弹 —— 女装大佬被拆穿是妹子假扮

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《All of the Stars》- Ed Sheeran 《All of the Stars》- Ed Sheeran 手机党少年们想听歌,请使劲儿戳(这里) @Leon_swool ...

小小编辑
今天
506
8
3. 彤哥说netty系列之Java BIO NIO AIO进化史

你好,我是彤哥,本篇是netty系列的第三篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/AIO。 本...

彤哥读源码
今天
42
0
02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
12
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部