datatbales的数据源类型(Data source types)
数据是复杂的,并且所有的数据是不一样的。因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据。
本节将讨论 DataTables 处理数据的三个核心概念:
- 处理模式
- 数据类型
- 数据源
处理模式(Processing modes)
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
- 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
- 服务器端处理(ServerSide)—— 数据处理是在服务器上执行(页面只处理当前页的数据)【物理分页】。
每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。
PS:当然这个不是一定的,针对数据是可增长的,不确定最终数据是多少那么最好是选择服务器模式,如果是确定的数据,利用缓存选择客户端模式也未尝不可
服务器模式 :需要启用 serverSideOption
属性,完整的介绍参考 服务器处理(server-side)
数据源类型(Data source types)
DataTables 使用的数据源必须是一个数组,数组里的每一项将显示在你定义的行上面,DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源:
- 数组(Arrays [])
- 对象(objects {})
- 实例(new myclass())
DataTables 可以用 columns.dataOption
或者 columns.renderOption
columns.render 1不定时一讲
columns.render 2不定时一讲
columns.render 3不定时一讲
columns.render 4不定时一讲
选项来设定显示数据,默认操作模式是数组(Arrays),而对象(Objects)和实例(Instance)能处理更复杂的数据
数组(Arrays)
数组在 DataTables 中很容易使用当使用数组作为数据源,每个数组元素的数量必须等于表中的列数。例如,对于一个6列的表格如下:
10
25
50
100
entries
Name | Position | Office | Extn. | Start date | Salary |
---|---|---|---|---|---|
Garrett Winters | Director | Edinburgh | 8422 | 2011/07/25 | $5,300 |
Tiger Nixon | System Architect | Edinburgh | 5421 | 2011/04/25 | $3,120 |
- var data = [
- [
- "Tiger Nixon",
- "System Architect",
- "Edinburgh",
- "5421",
- "2011/04/25",
- "$3,120"
- ],
- [
- "Garrett Winters",
- "Director",
- "Edinburgh",
- "8422",
- "2011/07/25",
- "$5,300"
- ]
- ];
- //然后 DataTables 这样初始化:
- $('#example').DataTable( {
- data: data
- } );
对象(Objects)
对象看起来很直观,使用起来和数组略有不同。如果你已经参考了 API ,你可以知道通过对象获得特定的数据非常简单, 你只需要使用一个属性的名字,而不是记住这个数组的索引,比如data.name,而不是data[0]
根据表格的需求显示,对象可以包含更多的信息,例如包括数据库的主键而用户是看不见的.
使用对象前,你需要明确告诉 DataTables 那个属性对应那一列, 通过使用 columns.dataOption
或者 columns.dataOption
选项完成。
下面看看 Object 是个什么样的格式:
10
25
50
100
entries
Name | Position | Salary | Office |
---|---|---|---|
Garrett Winters | Director | $5,300 | Edinburgh |
Tiger Nixon | System Architect | $3,120 | Edinburgh |
- var data = [
- {
- "name": "Tiger Nixon",
- "position": "System Architect",
- "salary": "$3,120",
- "start_date": "2011/04/25",
- "office": "Edinburgh",
- "extn": "5421"
- },
- {
- "name": "Garrett Winters",
- "position": "Director",
- "salary": "$5,300",
- "start_date": "2011/07/25",
- "office": "Edinburgh",
- "extn": "8422"
- }
- ];
- //object可以如下初始化表格
- $('#example').DataTable( {
- data: data,
- //使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
- //data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
- columns: [
- { data: 'name' },
- { data: 'position' },
- { data: 'salary' },
- { data: 'office' }
- ]
- } );
实例(Instances)
DataTables 从实例中获取数据显示是非常有用的,这些实例可以定义成抽象的方法来更新数据。
注意,name,salary,position 是属性而office是一个方法,DataTables 允许这样使用,他会自动识别,详细见手册 columns.dataOption
以上为实例作为数据源的实例,效果如下:
10
25
50
100
entries
Name | Salary | Office | Position |
---|---|---|---|
Garrett Winters | $5,300 | Edinburgh | Director |
Tiger Nixon | $3,120 | Edinburgh | System Architect |
- function Employee ( name, position, salary, office ) {
- this.name = name;
- this.position = position;
- this.salary = salary;
- this._office = office;
- this.office = function () {
- return this._office;
- }
- };
- $('#example').DataTable( {
- data: [
- new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
- new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
- ],
- columns: [
- { data: 'name' },
- { data: 'salary' },
- { data: 'office()' },
- { data: 'position' }
- ]
- } );
Data sources
DataTables 支持三种数据源显示:
- DOM
- JavaScript
- Ajax
DOM
DataTables 初始化后,它会自动检查表格中的数据,如果存在即作为表显示的数据 (注意,如果你这时使用data或者ajax传递数据将不会显示),这是使用 DataTables 最简单的方法,渲染已经存在的table
注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源(见上)。
DataTables还可以直接把 DOM 数据转化为自己的内部数据对象,示例如下:
10
25
50
100
entries
Column 1 | Column 2 |
---|---|
Row 1 Data 1 | Row 1 Data 2 |
Row 2 Data 1 | Row 2 Data 2 |
- <button id="table_id_example_button">获取选中的行</button>
- <table id="table_id_example" class="display">
- <thead>
- <tr>
- <th>Column 1</th>
- <th>Column 2</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Row 1 Data 1</td>
- <td>Row 1 Data 2</td>
- </tr>
- <tr>
- <td>Row 2 Data 1</td>
- <td>Row 2 Data 2</td>
- </tr>
- </tbody>
- </table>
- $(document).ready( function () {
- var table = $('#table_id_example').DataTable({
- //这样配置后,即可用DT的API来访问表格数据
- columns: [
- {data: "column1"},
- {data: "column2"}
- ]
- });
- //给行绑定选中事件
- $('#table_id_example tbody').on( 'click', 'tr', function () {
- if ($(this).hasClass('selected')) {
- $(this).removeClass('selected');
- }
- else {
- table.$('tr.selected').removeClass('selected');
- $(this).addClass('selected');
- }
- } );
- //给按钮绑定点击事件
- $("#table_id_example_button").click(function () {
- var column1 = table.row('.selected').data().column1;
- var column2 = table.row('.selected').data().column2;
- alert("第一列内容:"+column1 + ";第二列内容: " + column2);
- });
- } );
HTML5
DataTables 中还可以利用HTML5 data- *属性,可以提供datatables中排序和搜索数据的附加信息。例如您可能有一个列是一个日期格式,如“21st November 2013”,浏览器将难以排序,但是你可以提供一个data-order属性作为HTML的一部分包含一个时间戳,就可以很容易地解决。此外,可以使用data-search搜索数据。例如:
1
2
3
|
< td data-search = "21st November 2013 21/11/2013" data-order = "1384992000" > 21st November 2013 </ td > |
DataTables 中会自动检测:
排序数据: data-order 和 data-sort 属性
查找数据: data-search 和 data-filter 属性
详细参考手册
Javascript
你可以指定 DataTables 使用哪一种数据作为初始化,这些数据可以是数组,对象或者实例(见上),只要 JavaScript 可以访问到数据就可以交给 DataTables 显示。
查看 DataTables 的api,使用row.add()和row.remove()方法可以动态添加删除表格中的数据
Ajax
ajax和javascript数据很类似,你只需要指定要加载的数据的url即可。
服务器端处理是一种特殊的数据源,每页的数据通过异步请求来显示相应的数据,这允许大量的数据集显示,怎么实现服务器处理,详细参考手册
datatbales的数据源类型(Data source types)的更多相关文章
- 数据源(Data Source
数据源(Data Source)顾名思义,数据的来源,是提供某种所需要数据的器件或原始媒体.在数据源中存储了所有建立数据库连接的信息.就像通过指定文件名称可以在文件系统中找到文件一样,通过提供正确的数 ...
- C#语言实现ArcGIS数据源重置之Set Data Source功能
1.须要:依据选择的Mxd路径和目标数据源路径进行重置数据源.此处以(.Mdb为例): 主要利用到的接口: (1)IMapDocument (2)IMapControl2 (3)IWor ...
- Filter Lookup Editor Data Source 筛选器查找编辑器数据源
In this lesson, you will learn how to filter the data displayed by a lookup editor. This editor is s ...
- 以Excel 作为Data Source,将data导入db
将Excel作为数据源,将数据导入db,是SSIS的一个简单的应用,下图是示例Excel,数据列是code和name 第一部分,Excel中的数据类型是数值类型 1,使用SSDT创建一个package ...
- Collection View Programming Guide for iOS---(三)---Designing Your Data Source and Delegate
Designing Your Data Source and Delegate 设计你的数据源和委托 Every collection view must have a data source o ...
- excel 导入数据库 / SSIS 中 excel data source --64位excel 版本不支持-- solution
当本地安装的excel(2013版) 是64-bit时:出现的以下两种错误 解决: 1. excel 导入数据库 , 如果文件是2007则会出现:“The 'Microsoft.ACE.OLEDB.1 ...
- data source 和initial catalog
initial catalog与database的区别是什么Initial Catalog: DataBase: 两者没有任何区别只是名称不一样,就好像是人类的真实姓名与曾用名一样..都可以叫你. * ...
- Data Source与数据库连接池简介 JDBC简介(八)
DataSource是作为DriverManager的替代品而推出的,DataSource 对象是获取连接的首选方法. 起源 为何放弃DriverManager DriverManager负责管理驱动 ...
- 《从0到1学习Flink》—— Data Source 介绍
前言 Data Sources 是什么呢?就字面意思其实就可以知道:数据来源. Flink 做为一款流式计算框架,它可用来做批处理,即处理静态的数据集.历史的数据集:也可以用来做流处理,即实时的处理些 ...
随机推荐
- java基础笔记(7)
Socket编程 通信基础:ip地址(位置).协议(语言).端口(软件程序): java提供网络功能的四大类: InetAddress没有构造函数,不够里面有一些方法是可以返回实例,如: InetAd ...
- POJ 3549 GSM phone(圆+扫描线+最短路)
题目意思是求起点s到终点s的最短路,但是只能在圆的内部和边上走.一种可以想到的方法就是求出所有的交点,然后两两连边并验证合法性,但是这样的交点数规模有n2. 我们可以观察发现,我们在圆求并构成的图形中 ...
- SQL Server to MySQL
使用 Navicat 导入向导迁移 会遇到以下问题 SQL Server 中的 GUID 类型字段会变成 {guid} 多个外层花括号, 导致程序问题. 部分字段类型长度不大一致, 需要手工调整. . ...
- 自己写的SqlHelper,提示在调用"Fill"前,SelectCommand 属性尚未初始化.错误
namespace 操作数据{ class SqlHelper { public DataSet SqlTODs(string cmdstring) { ...
- MySQL索引面试题分析(索引分析,典型题目案例)
[建表语句] create table test03( id int primary key not null auto_increment, c1 char(10), c2 char(10), c3 ...
- 009-流程控制 for 语句
流程控制 for 语句 ##################### 语法一 ################################# #!/bin/bash do echo $i done ...
- Listview四种视图VIEW
http://wenku.baidu.com/link?url=65Ac8WL6j8KZwDlN8LyoxqFF5Jynvg80LnKc4jqTPQTY-59wwRDKhqGySYwxf6gZ9_6T ...
- pandas读取Excel文件
In [7]: import pandas as pd filname = 'ch02数据导入\\student.xlsx' data = pd.read_excel(filname) data Ou ...
- Oracle 9i,10g,11g各自alert日志的位置
10g&9i的alert日志: 进入oracle:[zhangshengdong@oralocal1 ~]$ sudo su - oracle[oracle@oralocal1 ~]$ sql ...
- windows10安装pycharm,以及pycharm教程和破解码
pycharm下载请点我 根据自己的情况选择安装目录 下面我们选择"64位安装"(根据自己的系统来选择),并勾上".py",如图所示: 一定要拉到最后才行 p ...