Datatables是一款jquery表格插件。它是一個高度靈活的工具,可以將任何HTML表格添加高級的交互功能。
代碼:
$('#example1').DataTable({
"paging" : true,
"lengthChange": true,
"searching" : true,
"ordering" : false,
"info" : true,
"autoWidth" : true,
"jQueryUI" : true,
"paging" : false,
"processing" : true,
"scrollX" : true,
"scrollY" : true,
"serverSide" : true,
"stateSave" : true,
"deferRender" : true
})
jQueryUI
應用jQuery UI ThemeRoller的標籤和CSS類。
autoWidth
啓用或者禁止自動列寬的計算。如果已經定義了列寬,禁止這個選項可以實現最優的性能
info
當應用了搜索時,會在適當位置顯示錶格的搜索條件。 這個配置允許打開或者關閉這個特性。當應用了搜索時,會在適當位置顯示錶格的搜索條件。 這個配置允許打開或者關閉這個特性。
lengthChange
如果pagination啓用了, 這個選項設爲true會顯示一個可以讓用戶選擇每頁顯示多少條記錄的下拉框。
ordering
允許或禁止對各個數據列使用排序。 默認情況下,點擊每列的表頭單元格,可以根據該列對整個表格進行排序。這個選項可以停用這個排序功能。
paging
DataTables可以將大量的記錄分割爲一個個獨立的頁。在一個較小的頁面空間上展示大量的數據記錄的時候,這是個非常有效的方法。 這個提供了頁面導航控件用來請求顯示不同的數據。 這個功能是默認啓用的(true),如果你想禁止它就將它設置爲false.
processing
當表格處在處理過程(例如排序)中時,啓用或者禁止 'processing'指示器的顯示。當處理大數據時,處理過程耗費的時間很明顯,這個功能就顯得非常有用。
scrollX
允許水平滾動。如果你的表格太寬以至於不能適應特定的佈局,或者有太多的列,可以啓用表格在視窗中水平滾動。
scrollY
控制表格的垂直滾動。 Vertical scrolling 強制DataTable爲指定的高度,並且會允許任何超出當前視口的數據進行滾動。 這個可以作爲在一個小的視口內顯示大量數據的一個選擇(儘管分頁和滾動可以同時使用,如果需要的話)。
searching
是否允許Datatables開啓本地搜索
serverSide
DataTables有兩種基本的工作模式可供選擇:
- 客戶端處理模式——此模式下如:過濾、分頁、排序的處理都在瀏覽器中進行。
- 服務器端處理模式——此模式下如:過濾、分頁、排序的處理都放在服務器端進行。
默認情況下DataTables使用客戶端處理模式,但是可以通配置讓切換到服務器端處理模式。 當處理大量數據的時候(如超過50000條記錄)服務器端處理模式就十分有用。這種情況下可以使用數據庫來進行排序操作。 現代的數據庫都針對這樣的處理進行了優化,使用這樣的方式能夠讓DataTables輕鬆應付幾萬條的記錄排序、過濾。
使用服務器端處理模式時,DataTables會向服務器端發送必要的參數以說明所需的數據(如頁碼、過濾條件等)。 同時DataTable也需要從返回的參數中獲取顯示錶格所需的參數。
stateSave
開啓或者禁用狀態儲存。當你開啓了狀態儲存,Datatables會存儲一個狀態到瀏覽器上, 包含分頁位置,每頁顯示的長度,過濾後的結果和排序。當用戶重新刷新頁面,表格的狀態將會被設置爲之前的設置。
deferRender
控制表格的延遲渲染,可以提高初始化的速度。