什么是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種數據方式加載的列表,都可以完美的實現,簡單搜索,分頁和排序功能(真翻頁的實現要稍微復雜一點,這個后續文章再進行描述).
這篇文章僅僅是入門級的,讓大家初步了解這個組件的基本面貌,一些比較詳盡的內容我會在隨后的博文中討論,如果大家有興趣了解這個控件,或者已經在使用這個控件,希望和我交流的,還請不吝賜教.