datatbales的資料源類型(Data source types)

資料是複雜的,并且所有的資料是不一樣的。是以 DataTables 中有很多的選項可用于配置如何獲得表中的資料顯示,以及如何處理這些複雜的資料。

本節将讨論 DataTables 處理資料的三個核心概念：

處理模式

資料類型

資料源

DataTables 中有兩種不同的方式處理資料(排序、搜尋、分頁等):

用戶端處理（Client）—— 所有的資料集預先加載（一次擷取所有資料），資料處理都是在浏覽器中完成的【邏輯分頁】。

伺服器端處理（ServerSide）—— 資料處理是在伺服器上執行（頁面隻處理目前頁的資料）【實體分頁】。

每種模式都有自己的優點和缺點,選擇哪種模式是由你的資料量決定的。根據經驗來看,資料少于 10,000 行你可以選擇用戶端模式,超過 10,000 行的使用伺服器端處理。 請注意,兩種處理模式不能同時使用,但是可以動态更改從一個模式到另一個。

PS:當然這個不是一定的，針對資料是可增長的，不确定最終資料是多少那麼最好是選擇伺服器模式，如果是确定的資料，利用緩存選擇用戶端模式也未嘗不可

DataTables 使用的資料源必須是一個數組，數組裡的每一項将顯示在你定義的行上面，DataTables 可以使用三種基本的 JavaScript 資料類型來作為資料源：

數組(Arrays [])

對象(objects {})

執行個體(new myclass())

數組在 DataTables 中很容易使用當使用數組作為資料源,每個數組元素的數量必須等于表中的列數。例如,對于一個6列的表格如下:

Show 102550100 entries

Search:

Name

Position

Office

Extn.

Start date

Salary

Garrett Winters

Director

Edinburgh

8422

2011/07/25

$5,300

Tiger Nixon

System Architect

5421

2011/04/25

$3,120

Showing 1 to 2 of 2 entries

var data = [

[

"Tiger Nixon",

"System Architect",

"Edinburgh",

"5421",

"2011/04/25",

"$3,120"

],

"Garrett Winters",

"Director",

"8422",

"2011/07/25",

"$5,300"

]

];

//然後 DataTables 這樣初始化：

$('#example').DataTable( {

data: data

} );

對象看起來很直覺，使用起來和數組略有不同。如果你已經參考了 API ，你可以知道通過對象獲得特定的資料非常簡單， 你隻需要使用一個屬性的名字，而不是記住這個數組的索引，比如data.name，而不是data[0]

根據表格的需求顯示，對象可以包含更多的資訊,例如包括資料庫的主鍵而使用者是看不見的.

下面看看 Object 是個什麼樣的格式：

{

"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",

"extn": "8422"

}

//object可以如下初始化表格

data: data,

//使用對象數組，一定要配置columns，告訴 DataTables 每列對應的屬性

//data 這裡是固定不變的，name，position，salary，office 為你資料裡對應的屬性

columns: [

{ data: 'name' },

{ data: 'position' },

{ data: 'salary' },

{ data: 'office' }

DataTables 從執行個體中擷取資料顯示是非常有用的，這些執行個體可以定義成抽象的方法來更新資料。

以上為執行個體作為資料源的執行個體，效果如下：

function Employee ( name, position, salary, office ) {

this.name = name;

this.position = position;

this.salary = salary;

this._office = office;

this.office = function () {

return this._office;

};

data: [

new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),

new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )

{ data: 'office()' },

{ data: 'position' }

DataTables 支援三種資料源顯示：

DOM

JavaScript

Ajax

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>

<td>Row 1 Data 1</td>

<td>Row 1 Data 2</td>

<td>Row 2 Data 1</td>

<td>Row 2 Data 2</td>

</tbody>

</table>

$(document).ready( function () {

var table = $('#table_id_example').DataTable({

//這樣配置後，即可用DT的API來通路表格資料

{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搜尋資料。例如:

1

2

3

<code>&lt;</code><code>td</code> <code>data-search</code><code>=</code><code>"21st November 2013 21/11/2013"</code> <code>data-order</code><code>=</code><code>"1384992000"</code><code>&gt;</code>

<code>    </code><code>21st November 2013</code>

<code>&lt;/</code><code>td</code><code>&gt;</code>

DataTables 中會自動檢測:

排序資料: data-order 和 data-sort 屬性

查找資料: data-search 和 data-filter 屬性

詳細參考手冊

你可以指定 DataTables 使用哪一種資料作為初始化，這些資料可以是數組，對象或者執行個體(見上)，隻要 JavaScript 可以通路到資料就可以交給 DataTables 顯示。

檢視 DataTables 的api，使用row.add()和row.remove()方法可以動态添加删除表格中的資料

ajax和javascript資料很類似，你隻需要指定要加載的資料的url即可。

伺服器端處理是一種特殊的資料源，每頁的資料通過異步請求來顯示相應的資料，這允許大量的資料集顯示，怎麼實作伺服器處理，詳細參考手冊