数据是复杂的,并且所有的数据是不一样的。因此 DataTables 中有很多的选项可用于配置如何获得表中的数据显示,以及如何处理这些复杂的数据。
本节将讨论 DataTables 处理数据的三个核心概念:
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,也不可以动态更改从一个模式到另一个。
客户端处理是DataTables的默认操作模式,因为它易于使用并且不需要编写其他代码。在客户端处理模式下,表中数据的排序,搜索,分页以及DataTables执行的所有其他数据处理操作都是由DataTables本身在浏览器中完成的。
PS:当然这个不是一定的,针对数据是可增长的,不确定最终数据是多少那么最好是选择服务器模式,如果是确定的数据,利用缓存选择客户端模式也未尝不可
特点:当你希望在表中显示大量数据(例如,上百万行)时,服务器处理就可以发挥它的作用了。如果这个量级的数据,直接发送到客户端,然后由Javascript处理数据可能会涉及明显的性能开销,并可能导致最终应用程序的性能下降。在服务器端处理模式下,所有数据的排序,搜索等都将传递给服务器,该服务器可以利用数据库引擎,这些引擎已针对此类操作进行了高度调整。数据的每一页(在DataTables术语中称为draw)都会向服务器发出Ajax请求。尽管每个Ajax请求可能需要一秒钟的时间来完成,但是由于所有数据负载大,这种方法可能比大量的前期等待更可取。
特点:
服务器模式需要启用
serverSideOption
属性,完整的介绍参考 服务器处理(server-side)
DataTables 使用的数据源必须是一个数组,数组里的每一项将显示在你定义的行上面,DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源:
DataTables 可以用
columns.dataOption
或者
columns.renderOption
选项来设定显示数据,默认操作模式是数组(Arrays),而对象(Objects)和实例(Instance)能处理更复杂的数据
数组在 DataTables 中很容易使用当使用数组作为数据源,每个数组元素的数量必须等于表中的列数。例如,对于一个6列的表格如下:
Name | Position | Office | Extn. | Start date | Salary |
---|
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 } );
对象看起来很直观,使用起来和数组略有不同。如果你已经参考了 API ,你可以知道通过对象获得特定的数据非常简单, 你只需要使用一个属性的名字,而不是记住这个数组的索引,比如data.name,而不是data[0]
根据表格的需求显示,对象可以包含更多的信息,例如包括数据库的主键而用户是看不见的.
使用对象前,你需要明确告诉 DataTables 那个属性对应那一列, 通过使用
columns.dataOption
或者
columns.dataOption
选项完成。
下面看看 Object 是个什么样的格式:
Name | Position | Salary | Office |
---|
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' } ] } );
DataTables 从实例中获取数据显示是非常有用的,这些实例可以定义成抽象的方法来更新数据。
注意,name,salary,position 是属性而office是一个方法,DataTables 允许这样使用,他会自动识别,详细见手册
columns.dataOption
以上为实例作为数据源的实例,效果如下:
Name | Salary | Office | Position |
---|
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' } ] } );
DataTables 支持三种数据源显示:
DataTables 初始化后,它会自动检查表格中的数据,如果存在即作为表显示的数据 (注意,如果你这时使用data或者ajax传递数据将不会显示),这是使用 DataTables 最简单的方法,渲染已经存在的table
注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源(见上)。
DataTables还可以直接把 DOM 数据转化为自己的内部数据对象,示例如下:
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); }); } );
DataTables 中还可以利用HTML5 data- *属性,可以提供datatables中排序和搜索数据的附加信息。例如您可能有一个列是一个日期格式,如“21st November 2013”,浏览器将难以排序,但是你可以提供一个data-order属性作为HTML的一部分包含一个时间戳,就可以很容易地解决。此外,可以使用data-search搜索数据。例如:
<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 属性
详细参考手册
你可以指定 DataTables 使用哪一种数据作为初始化,这些数据可以是数组,对象或者实例(见上),只要 JavaScript 可以访问到数据就可以交给 DataTables 显示。
查看 DataTables 的api,使用row.add()和row.remove()方法可以动态添加删除表格中的数据
ajax和javascript数据很类似,你只需要指定要加载的数据的url即可。
服务器端处理是一种特殊的数据源,每页的数据通过异步请求来显示相应的数据,这允许大量的数据集显示,怎么实现服务器处理,详细参考手册
Translation from DataTables.net, with permission