鑒於自己一直在使用datatables,發現這是個很不錯的表格插件,但是好的東西都是英文的,所以我結合自己的使用經驗,把官網的英文api做下簡單的翻譯,同時也希望大家把自己的使用經驗一起分享出來,讓我們更好的使用datatables,本帖將會持續更新……
從基本屬性開始吧
bAutoWidth :啟用或禁用自動列寬度的計算。
默認值
|
true
|
類型
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bAutoWidth": false //關閉后,表格將不會自動計算表格大小,在瀏覽器大化小化的時候會擠在一坨
- } );
- } );
bDeferRender :根據官網的介紹翻譯過來就是,延期渲染,可以有個速度的提升,當datatable 使用Ajax或者JS源表的數據。這個選項設置為true,將導致datatable推遲創建表元素每個元素,直到他們都創建完成——本參數的目的是節省大量的時間。
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function() {
- var oTable = $('#example').dataTable( {
- "sAjaxSource": "sources/arrays.txt",
- "bDeferRender": true //這個參數我個人沒有使用過,到底是不是這個效果,大家自己去嘗試一下
- } );
- } );
bFilter :這個很容易明白,啟用或禁用過濾數據。在datatable過濾是“智能”,它允許用戶 最終輸入多個關鍵字(空格分隔),和每一行數據匹配,即使不是在被指定的順序(這允許匹配多個列)。注意,如果您希望使用過濾,在datatable中必 須設置為true,如果要刪除默認過濾輸入框和留住過濾功能,請使用{ @link DataTable.defaults.sDom }。這個最后一句不明白,不知道大家怎么理解。
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bFilter": false
- } );
- } );
bJQueryUI :這個不用多說了,一看就懂,啟用jQuery UI樣式,(需要在頁面添加jQuery的樣式文件)。
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function() {
- $('#example').dataTable( {
- "bJQueryUI": true
- } );
- } );
bLengthChange :開啟一頁顯示多少條數據的下拉菜單,允許用戶從下拉框(10、25、50和100),注意需要分頁(bPaginate:true)。
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bLengthChange": false,
bPaginate :開啟分頁功能,如果不開啟,將會全部顯示
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bPaginate": false
- } );
- } );
bProcessing :開啟讀取服務器數據時顯示正在加載中……特別是大數據量的時候,開啟此功能比較好
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bProcessing": true
- } );
- } );
bScrollInfinite :是否開啟不限制長度的滾動條(和sScrollY屬性結合使用),不限制長度的滾動條意味着當用戶拖動滾動條的時候DataTable會不斷加載數據當數據集十分大的時候會有些用處,該選項無法和分頁選項同時使用,分頁選項會被自動禁止,注意,額外推薦的滾動條會優先與該選項
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function() {
- $('#example').dataTable( {
- "bScrollInfinite": true,
- "bScrollCollapse": true,
- "sScrollY": "200px"//長200像素
- } );
- } );
bServerSide :開啟服務器模式,使用服務器端處理配置datatable。注意:sAjaxSource參數也必須被給予為了給datatable源代碼來獲取所需的 數據對於每個畫。 這個翻譯有點別扭。開啟此模式后,你對datatables的每個操作 每頁顯示多少條記錄、下一頁、上一頁、排序(表頭)、搜索,這些都會傳給服務器相應的值。
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bServerSide": true,
- "sAjaxSource": "xhr.php"
- } );
- } );
bInfo :啟用或禁用表信息顯示。這顯示了關於數據的信息,目前在網頁上,包括信息過濾數據,如果行為被執行。這個參數在bServerSide配置后需要用到。
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bInfo": false//如果這個參數不穿到后台去,服務器分頁會報錯,據說這個參數包含了表的所有信息
- } );
- } );
bSort :開啟排序功能,每一列都有排序功能,如果關閉了,排序功能將失效,也可以自定義排序功能。單個列的排序可以禁用“bSortable”選項。
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bSort": false
- } );
- } );
bSortClasses :是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class,當該列被排序的時候,可以切換其背景顏色,該選項作為一個來回切換的屬性會增加執行時間(當class被移除和添加的時候),當對大數據集進行排序的時候你或許希望關閉該選項
默認值:
|
true
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bSortClasses": false
- } );
- } );
bStateSave :是否開啟狀態保存,當選項開啟的時候會使用一個cookie保存表格展示的信息的狀態,例如分頁信息,展示長度,過濾和排序等。這樣當終端用戶重新加載這個頁面的時候可以使用以前的設置
默認值:
|
false
|
類型:
|
boolean
|
- $(document).ready( function () {
- $('#example').dataTable( {
- "bStateSave": true
- } );
- } );
sScrollX :是否開啟水平滾動,當一個表格過於寬以至於無法放入一個布局的時候,或者表格有太多列的時候,你可以開啟該選項從而在一個可橫向滾動的視圖里面展示表格,該屬性可以是css設置,或者一個數字(作為像素量度來使用)
默認值:
|
blank string - i.e. disabled
|
類型:
|
string
|
- $(document).ready( function() {
- $('#example').dataTable( {
- "sScrollX": "100%",
- "bScrollCollapse": true
- } );
- } );
sScrollY:是否開啟垂直滾動,垂直滾動會驅使DataTable設置為給定的長度,任何溢出到當前視圖之外的數據可以通過垂直滾動進行察看當在小范圍區域中顯示大量數據的時候,可以在分頁和垂直滾動中選擇一種方式,該屬性可以是css設置,或者一個數字(作為像素量度來使用)
默認值:
|
blank string - i.e. disabled
|
類型:
|
string
|
- $(document).ready( function() {
- $('#example').dataTable( {
- "sScrollY": "200px",
- "bPaginate": false
- } );
- } );
本節完畢,推薦是用ctrl+f查找使用
收藏供查:原文地址:http://bbs.sailit.cn/forum.php?mod=viewthread&tid=21