DataTables 控件使用和心得 (1) - 入門

什麼是DataTables

• DataTables是一個基於HTML/CSS/JavaScript的前端列表組件.
• 基於JQuery
• 開源而且免費(除特殊支持服務)
• 主要特點: 高性能,響應式,功能完整
• 主網站爲http://www.datatables.net/

DataTables的優點

完整全面的功能

其開發團隊已經注入了大量心血,功能很是完整,已經能夠適應絕大多數前端列表的開發需求.

豐富的API和支持

                具備至關豐富的參數(Options)和函數(API)對控件進行定義和控制,實現各類靈活的配置和功能.

                自己雖然爲開源免費軟件,但支持力度很高,更新頻繁;主網站內容豐富,詳盡.另外也提供付費的支持服務.

優秀的質量,穩定性和性能

                聲稱有2900+套單位測試代碼的支持;其主JS庫壓縮之後只有26K;另外其核心Render機制,是僅僅Render列表的顯示部份內容(10000條數據200頁,僅僅Render1頁50條數據),爲穩定高效提供了基礎.

豐富的功能

目前比較有價值的功能包括

• 支持Ajax數據獲取,提供真分頁實現方案.
• 提供多種常見主題支持DataTables, jQuery UI, Bootstrap, Foundation
• 徹底支持響應式設計
• 完美支持排序,翻頁,自定義行列顯隱,樣式和內容.
• 自動控制列寬.
• 靈活控制表格的滾動條設定.
• 多語言支持
• 另外經過擴展功能還能夠實現
  • 　　列的拖動
  • 　　單列過濾
  • 　　行或列的固定
  • 　　表格內編輯
  • 　　少許類Excel功能(如鍵盤選擇,拖動賦值)
  • 　　Excel, PDF導出功能

DataTables的安裝

第一步: 下載並引入DataTables的主JS文件: jquery.dataTables.js或者jquery.dataTables.min.js

也可使用CDN:

官方CDN: http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js

Bootstrap CDN:  http://cdn.bootcss.com/datatables/1.10.6/js/jquery.dataTables.min.js

另外若是但願引入CSS,能夠下載官方提供的幾種常見的CSS樣式:

http://www.datatables.net/manual/styling/

第二步: 對頁面的指定列表元素調用DataTables組件

$(document).ready(function() {
    $('#example').dataTable();
} );

• #example對應了id=example的一個table元素.
• 通常來講dataTable函數會以一個對象爲參數,這個參數對象就是DataTables的Options,這些Options用於控制列表控件的各類特性.(關於Options的具體內容咱們之後討論,也能夠參閱官方文檔)

固然,在沒有任何Options的狀況下,DataTables是給出了一個標準的界面,以下圖:

 

左上是頁內條數控制(默認爲1頁10個),右上是簡單搜索功能,中間是列表主體,左下是分頁信息,右下是分頁控制.這些控件均可以經過Options進行顯隱, 控制和自定義.

DataTables常見的3種數據方式

HTML數據

全部數據在指定的Table元素中以TR,TD方式已經存在,這個時候,調用默認的dataTable函數就能夠實現該組件的默認功能. 調用方式與標準模式相似.

$(document).ready(function() {
    $('#example').dataTable();
} );

 

JS對象數據

指定的Table元素中不須要有任何數據.dataTable函數經過一個JS數組對象把數據加載到控件中去.寫法以下:

 

$('#example').dataTable( {
      "data": dataSet
    } );   

 

注意,dataset是一個數組對象,通常的格式是: [obj1,ojb2,ojb3….] , 每個obj對象對應每一行的數據, 這個對象的屬性會被依次綁定到每個列中.

遠程數據

經過Ajax從遠程獲取Json數據,並綁定到控件中去,寫法以下:

 $('#example').dataTable( {
        "ajax": url
    } );

url爲遠程請求的地址.

這裏須要特別注意的是,因爲dataTables內部實現機制,其返回的json並非一個簡單的數組對象,而是一個包含一個data屬性的對象,具體格式參考以下:

{ 「data」 : [obj1,obj2,obj3……] }

DataTables常見問題

對於後面2中數據加載模式,咱們能夠想到,原Table元素中的<tbody>中是不須要定義任何內容的.但<thead>能夠有2個選擇,經過HTML定義,dataTable函數綁定; 或者徹底由dataTable綁定和生成.若是是徹底由dataTable控件生成,其寫法以下:

 

  $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine"},
            { "title": "Browser"},
            { "title": "Platform"},
            { "title": "Version", "class": "center"},
            { "title": "Grade", "class": "center"}
        ]
    } );   

固然就算是用HTML定義<thead>,但數據中屬性的順序和<th>的順序不一樣,或者有些屬性並不須要顯示出來,該怎麼辦呢, 依然能夠經過columns配置屬性來進行定義.

$('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "data": "Engine"},
            { "data": "Browser"},
            { "data": "Platform"},
            { "data": "Version"}
        ]
    } );   

另外在使用標準dataTable函數之後,以上3種數據方式加載的列表,均可以完美的實現,簡單搜索,分頁和排序功能(真翻頁的實現要稍微複雜一點,這個後續文章再進行描述).

這篇文章僅僅是入門級的,讓你們初步瞭解這個組件的基本面貌,一些比較詳盡的內容我會在隨後的博文中討論,若是你們有興趣瞭解這個控件,或者已經在使用這個控件,但願和我交流的,還請不吝賜教.