开发者社区> ke_ry> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

datatbales的数据源类型(Data source types)

简介: 数据是复杂的,并且所有的数据是不一样的。因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据。 本节将讨论 DataTables 处理数据的三个核心概念: 处理模式 数据类型 数据源 处理模式(Processing modes) DataTables 中有两种不同的方式处理数据(排序、搜索、分页等): 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
+关注继续查看

数据是复杂的,并且所有的数据是不一样的。因此 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列的表格如下:

  1. var data = [
  2. [
  3. "Tiger Nixon",
  4. "System Architect",
  5. "Edinburgh",
  6. "5421",
  7. "2011/04/25",
  8. "$3,120"
  9. ],
  10. [
  11. "Garrett Winters",
  12. "Director",
  13. "Edinburgh",
  14. "8422",
  15. "2011/07/25",
  16. "$5,300"
  17. ]
  18. ];
  19.  
  20. //然后 DataTables 这样初始化:
  21. $('#example').DataTable( {
  22. data: data
  23. } );

对象(Objects)

对象看起来很直观,使用起来和数组略有不同。如果你已经参考了 API ,你可以知道通过对象获得特定的数据非常简单, 你只需要使用一个属性的名字,而不是记住这个数组的索引,比如data.name,而不是data[0]

根据表格的需求显示,对象可以包含更多的信息,例如包括数据库的主键而用户是看不见的.

使用对象前,你需要明确告诉 DataTables 那个属性对应那一列, 通过使用 columns.dataOption 或者 columns.dataOption 选项完成。

下面看看 Object 是个什么样的格式:

  1. var data = [
  2. {
  3. "name": "Tiger Nixon",
  4. "position": "System Architect",
  5. "salary": "$3,120",
  6. "start_date": "2011/04/25",
  7. "office": "Edinburgh",
  8. "extn": "5421"
  9. },
  10. {
  11. "name": "Garrett Winters",
  12. "position": "Director",
  13. "salary": "$5,300",
  14. "start_date": "2011/07/25",
  15. "office": "Edinburgh",
  16. "extn": "8422"
  17. }
  18. ];
  19. //object可以如下初始化表格
  20. $('#example').DataTable( {
  21. data: data,
  22. //使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
  23. //data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
  24. columns: [
  25. { data: 'name' },
  26. { data: 'position' },
  27. { data: 'salary' },
  28. { data: 'office' }
  29. ]
  30. } );

实例(Instances)

DataTables 从实例中获取数据显示是非常有用的,这些实例可以定义成抽象的方法来更新数据。

注意,name,salary,position 是属性而office是一个方法,DataTables 允许这样使用,他会自动识别,详细见手册 columns.dataOption 
以上为实例作为数据源的实例,效果如下:

  1. function Employee ( name, position, salary, office ) {
  2. this.name = name;
  3. this.position = position;
  4. this.salary = salary;
  5. this._office = office;
  6.  
  7. this.office = function () {
  8. return this._office;
  9. }
  10. };
  11.  
  12. $('#example').DataTable( {
  13. data: [
  14. new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
  15. new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
  16. ],
  17. columns: [
  18. { data: 'name' },
  19. { data: 'salary' },
  20. { data: 'office()' },
  21. { data: 'position' }
  22. ]
  23. } );

Data sources

DataTables 支持三种数据源显示:

  • DOM
  • JavaScript
  • Ajax

DOM

DataTables 初始化后,它会自动检查表格中的数据,如果存在即作为表显示的数据 (注意,如果你这时使用data或者ajax传递数据将不会显示),这是使用 DataTables 最简单的方法,渲染已经存在的table

注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源(见上)。

DataTables还可以直接把 DOM 数据转化为自己的内部数据对象,示例如下:

  1. <button id="table_id_example_button">获取选中的行</button>
  2. <table id="table_id_example" class="display">
  3. <thead>
  4. <tr>
  5. <th>Column 1</th>
  6. <th>Column 2</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>Row 1 Data 1</td>
  12. <td>Row 1 Data 2</td>
  13. </tr>
  14. <tr>
  15. <td>Row 2 Data 1</td>
  16. <td>Row 2 Data 2</td>
  17. </tr>
  18. </tbody>
  19. </table>
  20.  
  21. $(document).ready( function () {
  22. var table = $('#table_id_example').DataTable({
  23. //这样配置后,即可用DT的API来访问表格数据
  24. columns: [
  25. {data: "column1"},
  26. {data: "column2"}
  27. ]
  28. });
  29. //给行绑定选中事件
  30. $('#table_id_example tbody').on( 'click', 'tr', function () {
  31. if ($(this).hasClass('selected')) {
  32. $(this).removeClass('selected');
  33. }
  34. else {
  35. table.$('tr.selected').removeClass('selected');
  36. $(this).addClass('selected');
  37. }
  38. } );
  39. //给按钮绑定点击事件
  40. $("#table_id_example_button").click(function () {
  41. var column1 = table.row('.selected').data().column1;
  42. var column2 = table.row('.selected').data().column2;
  43. alert("第一列内容:"+column1 + ";第二列内容: " + column2);
  44. });
  45. } );

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即可。

服务器端处理是一种特殊的数据源,每页的数据通过异步请求来显示相应的数据,这允许大量的数据集显示,怎么实现服务器处理,详细参考手册

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

相关文章
类型体操之实现 type-challenges 中的 built-in 的所有类型
#built-in 是 type-challenges 库中的一个 tag,里面一共包括了 7 个类型,其中前两个就是之前介绍过的 类型体操之实现 Pick 和 Omit 中的 Pick 和 Omit
0 0
Data-Data Objects and Attribute Types| 学习笔记
快速学习 Data-Data Objects and Attribute Types。
0 0
predefined data types in UI5
PREDEFINED_TYPES sap.ui.base.DataType.getType
0 0
关于powerdesigner中的data types说明
原文:关于powerdesigner中的data types说明 这一堆的数据类型看着真是头大,弄个表格对照一下。 Numeric data types Standard datatype DBMS-specific physical data type ...
843 0
【12c】扩展数据类型(Extended Data Types)-- MAX_STRING_SIZE
【12c】扩展数据类型(Extended Data Types)-- MAX_STRING_SIZE 在12c中,与早期版本相比,诸如VARCHAR2, NAVARCHAR2以及 RAW这些数据类型的大小会从4K以及2K字节扩展至32K字节。
804 0
+关注
ke_ry
开源技术专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
OPEN SOURCE IN A DATA-DRIVEN WORLD
立即下载
Data WareHouse, Data Lakes Wha
立即下载
The Value of Exploratory Data
立即下载