dataTables.js成員解釋大全

1，bLengthChange 是否顯示選擇table中顯示資料量 show(10,20,100...)column
2，bPaginate 是否顯示分頁menus
3，bProcessing table載入資料時，是否顯示‘進度’提示
4，bInfo  是否顯示有關table中現有資料的資訊，執行過濾資料操作(filtered data)時顯示對應資訊
 
5，bAutoWidth
是否啟動自動計算各個欄位(td儲存格)所在寬度
 
$(document).ready( function () {
  $('#example').dataTable( {
    "bAutoWidth": false
  } );
} );
6，bScrollInfinite 是否啟動初始化捲軸--資料過多了，通常和sScrollY結合使用
不能和pagination分頁功能並存，分頁了資料就不會過多了(垂直方向）
$(document).ready( function() {
  $('#example').dataTable( {
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "sScrollY": "200px"
  } );
} );
 
7，bServerSide是否啟動伺服器端資料匯入，即要和sAjaxSource結合使用
  $(document).ready( function () {
    $('#example').dataTable( {
      "bServerSide": true,
      "sAjaxSource": "xhr.php"
    } );
  } );
 
8，bSort 是否啟動各個欄位的排序功能--點擊table對應欄位的最上面一下，
    該列就會進行asc或desc排序
   bSortable可對應啟動單個欄位的排序功能
 
9，bSortClasses 是否啟動給正在被排序的列(欄位)加上class(有sorting_1,sorting_2和    
   sorting_3三種)屬性，以凸顯正在排序的列，這個功能耗時間，資料大時，關閉
 
10，bStateSave 是否啟動狀態保留，開啟cookie記住table資訊如分頁資訊，
   資料長度，filtering過濾和sorting過濾等資訊。
 
11，sScrollX 欄位過多，啟動橫向捲軸
  $(document).ready( function() {
  $('#example').dataTable( {
    "sScrollX": "100%",
    "bScrollCollapse": true
  } );
} );
12,sScrollY  資料過多，使用垂直捲軸 第六個有使用到
   $(document).ready( function() {
  $('#example').dataTable( {
    "sScrollY": "200px",
    "bPaginate": false
  } );
} );
 
13，bFilter 是否啟動搜尋功能
 
14，bDestroy
    $(document).ready( function() {
      $('#example').dataTable( {
        "sScrollY": "200px",     //顯示200px垂直長度視窗
        "bPaginate": false       //禁用分頁
       } );
  
     // Some time later....
      $('#example').dataTable( {
         "bFilter": false,
         "bDestroy": true        //這使得在200px長度視窗顯示出來的資料，下一個視窗顯示
                                 //有使得有了分頁功能
       } );
   } );
15, iDisplayLength 一個分頁顯示多少行資料
16, iDisplayStart 從第幾行開始顯示資料
 
18，sPaginationType
  DataTables內建方法有‘two_button’和‘full_numbers’
   
$(document).ready( function() {
  $('#example').dataTable( {
    "sPaginationType": "full_numbers"
  } );
} )
這類方法是可以自訂的，如：自己寫個listbox方法，提供一個下拉框來選擇顯示當前一個table中顯示多少資料，
$(document).ready(function() {
  $('#example').dataTable( {
     "sPaginationType": "listbox"
   } );
} );
 
 
$.fn.dataTableExt.oPagination.listbox = {
    /*
     * Function: oPagination.listbox.fnInit
     * Purpose:  Initalise dom elements required for pagination with listbox input
     * Returns:  -
     * Inputs:   object:oSettings - dataTables settings object
     *             node:nPaging - the DIV which contains this pagination control
     *             function:fnCallbackDraw - draw function which must be called on update
     */
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {
        var nInput = document.createElement('select');
        var nPage = document.createElement('span');
        var nOf = document.createElement('span');
        nOf.className = "paginate_of";
        nPage.className = "paginate_page";
        if (oSettings.sTableId !== '') {
            nPaging.setAttribute('id', oSettings.sTableId + '_paginate');
        }
        nInput.style.display = "inline";
        nPage.innerHTML = "Page ";
        nPaging.appendChild(nPage);
        nPaging.appendChild(nInput);
        nPaging.appendChild(nOf);
        $(nInput).change(function (e) { // Set DataTables page property and redraw the grid on listbox change event.
            window.scroll(0,0); //scroll to top of page
            if (this.value === "" || this.value.match(/[^0-9]/)) { /* Nothing entered or non-numeric character */
                return;
            }
            var iNewStart = oSettings._iDisplayLength * (this.value - 1);
            if (iNewStart > oSettings.fnRecordsDisplay()) { /* Display overrun */
                oSettings._iDisplayStart = (Math.ceil((oSettings.fnRecordsDisplay() - 1) / oSettings._iDisplayLength) - 1) * oSettings._iDisplayLength;
                fnCallbackDraw(oSettings);
                return;
            }
            oSettings._iDisplayStart = iNewStart;
            fnCallbackDraw(oSettings);
        }); /* Take the brutal approach to cancelling text selection */
        $('span', nPaging).bind('mousedown', function () {
            return false;
        });
        $('span', nPaging).bind('selectstart', function () {
            return false;
        });
    },
     
    /*
     * Function: oPagination.listbox.fnUpdate
     * Purpose:  Update the listbox element
     * Returns:  -
     * Inputs:   object:oSettings - dataTables settings object
     *             function:fnCallbackDraw - draw function which must be called on update
     */
    "fnUpdate": function (oSettings, fnCallbackDraw) {
        if (!oSettings.aanFeatures.p) {
            return;
        }
        var iPages = Math.ceil((oSettings.fnRecordsDisplay()) / oSettings._iDisplayLength);
        var iCurrentPage = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1; /* Loop over each instance of the pager */
        var an = oSettings.aanFeatures.p;
        for (var i = 0, iLen = an.length; i < iLen; i++) {
            var spans = an[i].getElementsByTagName('span');
            var inputs = an[i].getElementsByTagName('select');
            var elSel = inputs[0];
            if(elSel.options.length != iPages) {
                elSel.options.length = 0; //clear the listbox contents
                for (var j = 0; j < iPages; j++) { //add the pages
                    var oOption = document.createElement('option');
                    oOption.text = j + 1;
                    oOption.value = j + 1;
                    try {
                        elSel.add(oOption, null); // standards compliant; doesn't work in IE
                    } catch (ex) {
                        elSel.add(oOption); // IE only
                    }
                }
                spans[1].innerHTML = " nbsp;of nbsp;" + iPages;
            }
          elSel.value = iCurrentPage;
        }
    }
};