dataTables.js成员解释大全 1 _JavaScript

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;
        }
    }
};