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列的表格如下:

Show  10 25 50 100  entries

Search:

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

Showing 1 to 2 of 2 entries

Previous 1 Next

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 是個什么樣的格式：

Show  10 25 50 100  entries

Search:

Name	Position	Salary	Office
Garrett Winters	Director	$5,300	Edinburgh
Tiger Nixon	System Architect	$3,120	Edinburgh

Showing 1 to 2 of 2 entries

Previous 1 Next

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 
以上為實例作為數據源的實例，效果如下：

Show  10 25 50 100  entries

Search:

Name	Salary	Office	Position
Garrett Winters	$5,300	Edinburgh	Director
Tiger Nixon	$3,120	Edinburgh	System Architect

Showing 1 to 2 of 2 entries

Previous 1 Next

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 數據轉化為自己的內部數據對象，示例如下：

獲取選中的行

Show  10 25 50 100  entries

Search:

Column 1	Column 2
Row 1 Data 1	Row 1 Data 2
Row 2 Data 1	Row 2 Data 2

Showing 1 to 2 of 2 entries

Previous 1 Next

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

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