datatables增刪改查的實現

學習可參考：http://www.guoxk.com/node/jquery-datatables

                      http://yuemeiqing2008-163-com.iteye.com/blog/2006942

 

   分別導入css和js文件

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />

  

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Content/datatables/js/jquery.dataTables.js"></script>
<script src="~/Content/datatables/js/dataTables.bootstrap.js"></script>

 加載

<script type="text/javascript">
        $(document).ready(function() {
            $(‘#example‘).dataTable();
        });
    </script>

 表單

<div class="col_2_3_right">
                <div class="index_viewport">
                    <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
                        <thead>
                            <tr>
                                <th width="20%">First name</th>
                                <th width="20%">Last name</th>
                                <th width="35%">City</th>
                                <th width="25%">Date</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

問題：有時提示找不到datatable方法

緣由

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。 
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

 從後臺ajax得數據重建datatables（表單的id要與json的key一致）

$.ajax({
                    　　type:‘get‘,//可選get
                    　　url:‘${projectPath}/search‘,
                    　　data:{"channelType":$(‘#channelType‘).val(),"channel":$(‘#channel‘).val(),"day":$(‘#day‘).val(),"startTime":$(‘#startTime‘).val(),"endTime":$(‘#endTime‘).val(),"database":$(‘#database‘).val()},
                    　　dataType:‘text‘,//服務器返回的數據類型 可選XML ,Json jsonp script htmltext等
                    　　success:function(msg){
                        var msgObj=JSON.parse(msg);
                        //從新構建table
                         $(‘#example‘).dataTable().fnClearTable();   //將數據清除
                    　    $(‘#example‘).dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //數據必須是json對象或json對象數組

                　　},
                    　　error:function(){
                    　　alert(‘error‘);
                    　　}
            })})

傳入的數據

//把服務器返回的數據轉成datatable需要的格式
        function packagingdatatabledata(msgObj){
            var editHtml="<a class=‘btn‘ data-toggle=‘modal‘ href=‘#modalbackdroptrue‘ >編輯</a>";
            //var editHtml="<a class=‘btn‘ href=‘#modalbackdroptrue‘ data-toggle=‘modal‘ >編輯</a>";
            var a=[];
            var tableName=[‘day‘,‘data‘,‘indata‘,‘edit‘];
            var banddata=storjson(msgObj[‘data‘]);
            var bandindata=storjson(msgObj[‘indata‘]);
            for(var key in banddata){
                var tempObj=new Object();
                tempObj.day=key;
                tempObj.data=banddata[key];
                tempObj.indata=bandindata[key];
                tempObj.edit=editHtml;
                a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
                }
            return a;
        }

 傳入的是一個對象數組，每一個對象表明一行，對象的屬性便是列

 

單擊時獲得某行的值

   需要引入 jquery.dataTables.nightly.js  在附件中有  

$(document).ready(function() {
    /* Init DataTables */
    $(‘#example‘).dataTable();
$(‘#example tbody tr‘).live(‘click‘, function () {
                var sTitle;
                var nTds = $(‘td‘, this);
                var sday = $(nTds[0]).text();  //獲得第1列的值
                var sout = $(nTds[1]).text();
                var sin = $(nTds[2]).text();

            } );

} );

   

2：詳細配置

var docrTable = $(‘#docrevisontable‘).dataTable({
            "bProcessing" : true, //DataTables載入數據時，是否顯示‘進度’提示
            "bServerSide" : true, //是否啓動服務器端數據導入
            "bStateSave" : true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回覆爲初始化狀態
            "bJQueryUI" : true, //是否使用 jQury的UI theme
            "sScrollY" : 450, //DataTables的高
            "sScrollX" : 820, //DataTables的寬
            "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項
            "iDisplayLength" : 40, //默認顯示的記錄數
            "bAutoWidth" : false, //是否自適應寬度
            //"bScrollInfinite" : false, //是否啓動初始化滾動條
            "bScrollCollapse" : true, //是否開啓DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變
            "bPaginate" : true, //是否顯示（應用）分頁器
            "bInfo" : true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數
            "sPaginationType" : "full_numbers", //詳細分頁組，能夠支持直接跳轉到某頁
            "bSort" : true, //是否啓動各個字段的排序功能
            "aaSorting" : [[1, "asc"]], //默認的排序方式，第2列，升序排列
            "bFilter" : true, //是否啓動過濾、搜索功能
                    "aoColumns" : [{
                        "mDataProp" : "USERID",
                        "sDefaultContent" : "", //此列默認值爲""，以防數據中沒有此值，DataTables加載數據的時候報錯
                        "bVisible" : false //此列不顯示
                    }, {
                        "mDataProp" : "USERNAME",
                        "sTitle" : "用戶名",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }, {
                        "mDataProp" : "EMAIL",
                        "sTitle" : "電子郵箱",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }, {
                        "mDataProp" : "MOBILE",
                        "sTitle" : "手機",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }, {
                        "mDataProp" : "PHONE",
                        "sTitle" : "座機",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }, {
                        "mDataProp" : "NAME",
                        "sTitle" : "姓名",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }, {
                        "mDataProp" : "ISADMIN",
                        "sTitle" : "用戶權限",
                        "sDefaultContent" : "",
                        "sClass" : "center"
                    }],
                    "oLanguage": { //國際化配置
                "sProcessing" : "正在獲取數據，請稍後...",
                "sLengthMenu" : "顯示 _MENU_ 條",
                "sZeroRecords" : "沒有您要搜索的內容",
                "sInfo" : "從 _START_ 到  _END_ 條記錄 總記錄數爲 _TOTAL_ 條",
                "sInfoEmpty" : "記錄數爲0",
                "sInfoFiltered" : "(所有記錄數 _MAX_ 條)",
                "sInfoPostFix" : "",
                "sSearch" : "搜索",
                "sUrl" : "",
                "oPaginate": {
                    "sFirst" : "第一頁",
                    "sPrevious" : "上一頁",
                    "sNext" : "下一頁",
                    "sLast" : "最後一頁"
                }
            },

                    "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
                        /* 用來改寫用戶權限的 */
                        if (aData.ISADMIN == ‘1‘)
                            $(‘td:eq(5)‘, nRow).html(‘管理員‘);
                        if (aData.ISADMIN == ‘2‘)
                            $(‘td:eq(5)‘, nRow).html(‘資料下載‘);
                        if (aData.ISADMIN == ‘3‘)
                            $(‘td:eq(5)‘, nRow).html(‘通常用戶‘);

                        return nRow;
                    },

                    "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
                        //服務器端，數據回調處理
                            "fnServerData" : function(sSource, aDataSet, fnCallback) {
                                $.ajax({
                                    "dataType" : ‘json‘,
                                    "type" : "POST",
                                    "url" : sSource,
                                    "data" : aDataSet,
                                    "success" : fnCallback
                                });
                            }
                });

                $("#docrevisontable tbody").click(function(event) { //當點擊表格內某一條記錄的時候，會將此記錄的cId和cName寫入到隱藏域中
                    $(docrTable.fnSettings().aoData).each(function() {
                        $(this.nTr).removeClass(‘row_selected‘);
                    });
                    $(event.target.parentNode).addClass(‘row_selected‘);
                    var aData = docrTable.fnGetData(event.target.parentNode);

                    $("#userId").val(aData.USERID);
                    $("#userN").val(aData.USERNAME);
                });

                $(‘#docrevisontable_filter‘).html(‘<span>用戶管理列表‘);
                $(‘#docrevisontable_filter‘).append(‘   <input type="button" class="addBtn" id="addBut" value="建立"/>‘);
                $(‘#docrevisontable_filter‘).append(‘   <input type="button" class="addBtn" id="addBut" value="修改"/>‘);
                $(‘#docrevisontable_filter‘).append(‘   <input type="button" class="addBtn" id="addBut" value="刪除"/>‘);
                $(‘#docrevisontable_filter‘).append(‘</span>‘);
        }

 設置隱藏列

var oTable = $(‘#example‘).dataTable();
oTable.fnSetColumnVis( 0, false);//隱藏列

 獲得當前頁面中的數據

var alldata=$(‘#example‘).dataTable().fnGetData();//獲得頁面中全部對象

 

// Row data 
$(document).ready(function() { 
oTable = $(‘#example‘).dataTable(); 

oTable.$(‘tr‘).click( function () { 
var data = oTable.fnGetData( this ); 
// ... do something with the array / object of data for the row 
} ); 
} ); 


// Individual cell data 
$(document).ready(function() { 
oTable = $(‘#example‘).dataTable(); 

oTable.$(‘td‘).click( function () { 
var sData = oTable.fnGetData( this ); 
alert( ‘The cell clicked on had the value of ‘+sData ); 
} ); 
} );

 刷新表中的數據(最後一個參數是否重繪表格，false你瀏覽到第二頁不會刷跑到第一頁，但數據不會改變)

$(‘#example‘).dataTable().fnUpdate( ‘a‘ , 1 , 1 ,false); //coll 
$(‘#example‘).dataTable().fnUpdate( [‘a‘,‘b‘] , 1 ); //row

 獲得當前瀏覽的datatables頁碼

var tableSetings=$(‘#example‘).dataTable().fnSettings()
var paging_length=tableSetings._iDisplayLength;//當前每頁顯示多少
var page_start=tableSetings._iDisplayStart;//當前頁開始
var page=Div(page_start,paging_length);

function Div(exp1, exp2) {  //整除
    var n1 = Math.round(exp1); //四捨五入
    var n2 = Math.round(exp2); //四捨五入

    var rslt = n1 / n2; //除
    if (rslt >= 0) {
        rslt = Math.floor(rslt); //返回小於等於原rslt的最大整數。
    }
    else {
        rslt = Math.ceil(rslt); //返回大於等於原rslt的最小整數。
    }
    return rslt;
}

 設置datatables跳轉到某頁

$(‘#example‘).dataTable().fnPageChange(page);

 注意：因爲後臺數據可能已經被其它人改變（記錄個數與如今前臺不一致），因此數據fnUpdate時需要判斷先後端數據的一致性，只刷 新前臺有的數據的狀態

 

dom:

http://datatables.net/release-datatables/examples/api/select_single_row.html 選擇一行 http://datatables.net/release-datatables/examples/api/select_row.html選擇多行 http://datatables.net/release-datatables/examples/api/editable.html 即時編輯行 http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html 多個tab http://datatables.net/release-datatables/examples/api/add_row.html添加一行（靜態） http://datatables.net/release-datatables/examples/api/multi_filter.html多列搜索 http://datatables.net/release-datatables/examples/api/multi_filter_select.html多列搜索（擴展） http://datatables.net/release-datatables/examples/api/highlight.html行列 高亮 http://datatables.net/release-datatables/examples/advanced_init/highlight.html 鼠標移上去亮 http://datatables.net/release-datatables/examples/api/row_details.html行詳細信息 http://datatables.net/release-datatables/examples/api/counter_column.html添加行數 http://datatables.net/release-datatables/examples/api/show_hide.html隱藏列 http://datatables.net/release-datatables/examples/api/api_in_init.html點中即爲搜索條件 http://datatables.net/release-datatables/examples/advanced_init/events_live.html 給每個行添加事件顯示行的信息 http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html鼠標事件 移到某一行顯示信息 http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html 同上 http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html 用sdom屬性控制插件位置 http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.htmlsdom應用 http://datatables.net/release-datatables/examples/advanced_init/length_menu.html更改按多少數據顯示 http://datatables.net/release-datatables/examples/advanced_init/complex_header.html表頭組 http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html按組顯示行 http://datatables.net/release-datatables/examples/advanced_init/row_callback.html列回調函數 http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html總計（footer回調） http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html自定義排序 http://datatables.net/release-datatables/examples/advanced_init/language_file.html國際化

 

一：api

bAutoWidth ：啓用或禁用自動列寬度的計算。

默認值	true
類型	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bAutoWidth": false  //關閉後，表格將不會自動計算表格大小，在瀏覽器大化小化的時候會擠在一坨
4.     } );
5. } );

bDeferRender ：根據官網的介紹翻譯過來就是，延期渲染，能夠有個速度的提高，當datatable 使用Ajax或者JS源表的數據。這個選項設置爲true,將致使datatable推遲建立表元素每一個元素,直到他們都建立完成——本參數的目的是節省大量的時間。

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     var oTable = $(‘#example‘).dataTable( {
3.         "sAjaxSource": "sources/arrays.txt",
4.         "bDeferRender": true   //這個參數我我的沒有使用過，究竟是不是這個效果，你們本身去嘗試一下
5.     } );
6. } );

bFilter ：這個很容易明白，啓用或禁用過濾數據。在datatable過濾是「智能」,它容許用戶 最終輸入多個關鍵字(空格分隔)，和每一行數據匹配,即便不是在被指定的順序(這容許匹配多個列)。注意,若是您但願使用過濾，在datatable中必須設置爲true，若是要刪除默認過濾輸入框和留住過濾功能,請使用{ @link DataTable.defaults.sDom }。這個最後一句不明白，不知道你們怎麼理解。

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bFilter": false
4.     } );
5. } );

bJQueryUI ：這個不用多說了，一看就懂，啓用jQuery UI樣式，(須要在頁面添加jQuery的樣式文件)。

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "bJQueryUI": true
4.     } );
5. } );

bLengthChange ：開啓一頁顯示多少條數據的下拉菜單，容許用戶從下拉框(十、2五、50和100)，注意須要分頁(bPaginate：true)。

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bLengthChange": false,

bPaginate ：開啓分頁功能，若是不開啓，將會所有顯示

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bPaginate": false   
4.     } );
5. } );

bProcessing ：開啓讀取服務器數據時顯示正在加載中……特別是大數據量的時候，開啓此功能比較好

默認值：	false
類型:	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bProcessing": true
4.     } );
5. } );

bScrollInfinite ：是否開啓不限制長度的滾動條（和sScrollY屬性結合使用），不限制長度的滾動條意味着當用戶拖動滾動條的時候DataTable會不斷加載數據當數據集十分大的時候會有些用處，該選項沒法和分頁選項同時使用，分頁選項會被自動禁止，注意，額外推薦的滾動條會優先與該選項

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "bScrollInfinite": true,
4.         "bScrollCollapse": true,
5.         "sScrollY": "200px"//長200像素
6.     } );
7. } );

bServerSide ：開啓服務器模式，使用服務器端處理配置datatable。注意：sAjaxSource參數也必須被給予爲了給datatable源代碼來獲取所需的數據對於每一個畫。 這個翻譯有點彆扭。開啓此模式後，你對datatables的每一個操做 每頁顯示多少條記錄、下一頁、上一頁、排序（表頭）、搜索，這些都會傳給服務器相應的值。

默認值：	false
類型：	boolean

1. $(document).ready( function () {
2.       $(‘#example‘).dataTable( {
3.           "bServerSide": true,
4.           "sAjaxSource": "xhr.php"
5.        } );
6. } );

bInfo ：啓用或禁用表信息顯示。這顯示了關於數據的信息,目前在網頁上,包括信息過濾數據,若是行爲被執行。這個參數在bServerSide配置後須要用到。

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.        "bInfo": false//若是這個參數不穿到後臺去，服務器分頁會報錯，聽說這個參數包含了表的全部信息
4.     } );
5. } );

bSort ：開啓排序功能，每一列都有排序功能，若是關閉了，排序功能將失效，也能夠自定義排序功能。單個列的排序能夠禁用「bSortable」選項。

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bSort": false
4.     } );
5. } );

bSortClasses ：是否在當前被排序的列上額外添加sorting_1,sorting_2,sorting_3三個class，當該列被排序的時候，能夠切換其背景顏色，該選項做爲一個來回切換的屬性會增長執行時間（當class被移除和添加的時候），當對大數據集進行排序的時候你或許但願關閉該選項

默認值：	true
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bSortClasses": false
4.      } );
5. } );

復

bStateSave ：是否開啓狀態保存，當選項開啓的時候會使用一個cookie保存表格展現的信息的狀態，例如分頁信息，展現長度，過濾和排序等。這樣當終端用戶從新加載這個頁面的時候可使用之前的設置

默認值：	false
類型：	boolean

1. $(document).ready( function () {
2.     $(‘#example‘).dataTable( {
3.         "bStateSave": true
4.     } );
5. } );

sScrollX ：是否開啓水平滾動，當一個表格過於寬以致於沒法放入一個佈局的時候，或者表格有太多列的時候，你能夠開啓該選項從而在一個可橫向滾動的視圖裏面展現表格，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）

默認值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "sScrollX": "100%",
4.         "bScrollCollapse": true
5.      } );
6. } );

sScrollY：是否開啓垂直滾動，垂直滾動會驅使DataTable設置爲給定的長度，任何溢出到當前視圖以外的數據能夠經過垂直滾動進行察看當在小範圍區域中顯示大量數據的時候，能夠在分頁和垂直滾動中選擇一種方式，該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）

默認值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "sScrollY": "200px",
4.         "bPaginate": false
5.      } );
6. } );

bDestroy ：使用傳遞的新的初始化對象中的屬性構造一個新的表格，並替換一個匹配指定的選擇器的表格，若是沒有匹配到表格，新的表格會被做爲一個普通表格被構建

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "sScrollY": "200px",
4.         "bPaginate": false
5.     } );
6.    
7.   // Some time later....
8.     $(‘#example‘).dataTable( {
9.         "bFilter": false,
10.         "bDestroy": true
11.     } );
12. } );

bRetrieve ：使用指定的選擇器檢索表格，注意，若是表格已經被初始化，該參數會直接返回已經被建立的對象，並不會顧及你傳遞進來的初始化參數對象的變化，將該參數設置爲true說明你確認已經明白這一點，若是你須要的話，bDestroy能夠用來從新初始化表格

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     initTable();
3.     tableActions();
4. } );
5. function initTable ()
6. {
7.     return $(‘#example‘).dataTable( {
8.     "sScrollY": "200px",
9.     "bPaginate": false,
10.     "bRetrieve": true
11.     } );
12. }
13. function tableActions ()
14. {
15.     var oTable = initTable();
16.     // perform API operations with oTable
17. }

bScrollAutoCss ：指明DataTable中滾動的標題元素是否被容許設置內邊距和外邊距等

默認值：	true
類型：	boolean

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "bScrollAutoCss": false,
4.         "sScrollY": "200px"
5.     } );
6. } );

bScrollCollapse ：當垂直滾動被容許的時候，DataTable會強制表格視圖在任什麼時候候都是給定的高度（對佈局有利）不過，當把數據集過濾到十分小的時候看起來會很古怪，並且頁腳會留在最下面當結果集的高度比給定的高度小時該參數會使表格高度自適應

默認值：	false
類型：

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "sScrollY": "200",
4.         "bScrollCollapse": true
5.     } );
6. } );

bSortCellsTop ：是否容許DataTable使用頂部（默認爲true）的單元格，或者底部（默認爲false）的單元格，當使用複合表頭的時候會有些用處

默認值：	false
類型：	boolean

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "bSortCellsTop": true
4.     } );
5. } );

iCookieDuration ：指定用於存儲客戶端信息到cookie中的時間長度，超過這個時間後，自動過時

默認值：	7200 (2 hours)
類型：	int

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "iCookieDuration": 60*60*24; // 一天
4.     } );
5. } )

iDeferLoading ：當選項被開啓的時候，DataTable在非加載第一次的時候不會向服務器請求數據，而是會使用頁面上的已有數據（不會應用排序等），所以在加載的時候保留一個XmlHttpRequest，iDeferLoading被用來指明須要延遲加載，並且也用來通知DataTable一個滿的表格有多少條數據，信息元素和分頁會被正確保留

默認值：	null
類型：	int

1. // 57 records available in the table, no filtering applied
2. $(document).ready( function() {
3.     $(‘#example‘).dataTable( {
4.         "bServerSide": true,
5.         "sAjaxSource": "scripts/server_processing.php",
6.         "iDeferLoading": 57
7.     } );
8. } );
9. // 57 records after filtering, 100 without filtering (an initial filter applied)
10. $(document).ready( function() {
11.      $(‘#example‘).dataTable( {
12.         "bServerSide": true,
13.         "sAjaxSource": "scripts/server_processing.php",
14.         "iDeferLoading": [ 57, 100 ],
15.             "oSearch": {
16.             "sSearch": "my_filter"
17.           }
18.       } );
19. } );

iDisplayLength ：單頁顯示的數據的條數，若是bLengthChange屬性被開啓，終端用戶能夠經過一個彈出菜單重寫該數值

默認值：	10
類型：	int

1. $(document).ready( function() {
2.        $(‘#example‘).dataTable( {
3.             "iDisplayLength": 50
4.         } );
5. } )

iDisplayStart ：當開啓分頁的時候，定義展現的記錄的起始序號，不是頁數，所以若是你每一個分頁有10條記錄並且想從第三頁開始，須要把該參數指定爲20

默認值	0
類型：	int

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "iDisplayStart": 20
4.     } );
5. } )

iScrollLoadGap ：滾動餘界是指DataTable在當前頁面還有多少條數據可供滾動時自動加載新的數據，你可能但願指定一個足夠大的餘界，以便滾動加載數據的操做對用戶來講是平滑的，同時也不會大到加載比須要的多的多的數據

默認值：	100
類型:	int

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "bScrollInfinite": true,
4.         "bScrollCollapse": true,
5.         "sScrollY": "200px",
6.         "iScrollLoadGap": 50
7.     } );
8. } );

iTabIndex :默認狀況下DataTable容許經過爲須要鍵盤導航的元素添加tabindex屬性來進行導航（排序、分頁、過濾），容許你經過tab鍵切換控制組件，使用回車鍵去激活他們，默認爲0表示按照文檔流來切換，若是須要的話，你可使用該參數重寫切換順序，使用-1來禁止內建的鍵盤導航

默認值：	0
類型：	int

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "iTabIndex": 1
4.     } );
5. } );

oSearch ：該參數容許你在初始化的時候使用已經定義的全局過濾狀態，sSearch對象必須被定義，可是全部的其它選項都是可選的，當bRegex爲true的時候，搜索字符串會被看成正則表達式，當爲false（默認）的時候，會被直接看成一個字符串，當bSmart爲true的時候，DataTable會使用使用靈活過濾策略（匹配任何可能的數據），爲false的時候不會這樣作

1. $(document).ready( function() {
2.       $(‘#example‘).dataTable( {
3.           "oSearch": {"sSearch": "Initial search"}
4.        } );
5. } )

sAjaxDataProp ：當使用Ajax數據源或者服務器端處理的時候，DataTable會默認搜索aaData屬性做爲數據源，該選項容許變動數據源的名稱，你可使用JavaScript的點號對象表示法去訪問多級網狀數據源

默認值：	aaData
類型：	string

1. // Get data from { "data": [...] }
2. $(document).ready( function() {
3.     var oTable = $(‘#example‘).dataTable( {
4.         "sAjaxSource": "sources/data.txt",
5.        "sAjaxDataProp": "data"
6.     } );
7. } );
8. // Get data from { "data": { "inner": [...] } }
9. $(document).ready( function() {
10.     var oTable = $(‘#example‘).dataTable( {
11.        "sAjaxSource": "sources/data.txt",
12.       "sAjaxDataProp": "data.inner"
13.    } );
14. } );

sAjaxSource ：該參數用來向DataTable指定加載的外部數據源（若是想使用現有的數據，請使用aData），能夠簡單的提供一個能夠用來得到數據url或者JSON對象，該對象必須包含aaData，做爲表格的數據源

默認值：	null
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.         "sAjaxSource": "list.action"
4.      } );
5. } )

sCookiePrefix :該參數能夠用來重寫DataTable默認指定的用來存儲狀態信息的cookie的前綴

默認值：	SpryMedia_DataTables_
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.       "sCookiePrefix": "my_datatable_"
4.     } );
5. } );

sDom ：這是用於定義DataTable佈局的一個強大的屬性，包括分頁，顯示多少條數據和搜索，格式以下：

1. The following options are allowed:
2.     ‘l‘ - 左上角按個下拉框，10個，20個，50個，全部的哪一個
3.     ‘f‘ - 快速過濾框
4.     ‘t‘ - 表格自己
5.     ‘i‘ - 分頁信息
6.     ‘p‘ -分頁按鈕
7.     ‘r‘ - 如今正在加載中……
8. The following constants are allowed:
9.     ‘H‘ - jQueryUI theme "header" classes (‘fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix‘)
10.     ‘F‘ - jQueryUI theme "footer" classes (‘fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix‘)
11. The following syntax is expected:
12.     ‘<‘ and ‘>‘ - div 元素
13.     ‘<"class" and ‘>‘ - 給div加clasa
14.     ‘<"#id" and ‘>‘ - 給div加上id
15. Examples:
16.     ‘<"wrapper"flipt>‘
17.     ‘<lf<t>ip>‘

默認值：	lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "sDom": ‘<"top"i>rt<"bottom"flp><"clear">‘
4.     } );
5. } );

‘<"top"i>rt<"bottom"flp><"clear">‘

這段代碼翻譯爲html就是這樣子的：

1. <div class="top">
2.     i
3. </div>
4. rt
5. <div class="bottom">
6.     flp
7. </div>
8. <div class="clear"></div>

這樣一對比起來，就容易理解多了.Datatables之強大的sDom屬性的應用
sPaginationType ：DataTable內建了兩種交互式分頁策略，兩個按鈕和全頁數，展示給終端用戶不一樣的控制方式，能夠經過API增長策略

默認值：	two_button
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "sPaginationType": "full_numbers"
4.     } );
5. } )

sScrollXInner ：當橫向滾動可用的時候，該屬性能夠用來強制DataTable的寬度比須要的更長，好比你須要表格彼此相隔適宜，該變量能夠用來使表格變大，並且強制滾動，該該屬性能夠是css設置，或者一個數字（做爲像素量度來使用）

默認值：	blank string - i.e. disabled
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "sScrollX": "100%",
4.        "sScrollXInner": "110%"
5.    } );
6. } );

sServerMethod ：設置使用Ajax方式調用的服務器端的處理方法或者Ajax數據源的HTTP請求方式

默認值：	GET
類型：	string

1. $(document).ready( function() {
2.     $(‘#example‘).dataTable( {
3.        "bServerSide": true,
4.        "sAjaxSource": "list.action",
5.        "sServerMethod": "POST"   //以post的方式提交數據
6.     } );
7. } )

二： 列屬性

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array to target one of many columns and each element in it can be:

aoColumnDefs:這個數組容許您針對一個特定列,多個列,或者全部列,使用aTargets屬性的數組中的每一個對象(請注意,介紹了aoColumnDefs datatable 1.7)。這提供了很大的靈活性在建立表,由於aoColumnDefs數組能夠是任意長度,目標是你特別想要的列。aTargets的屬性是一個數組來目標衆多列和每一個元素在它能夠:

• a string - class name will be matched on the TH for the column
• 0 or a positive integer - column index counting from the left
• a negative integer - column index counting from the right
• the string "_all" - all columns (i.e. assign a default)

aoColumns: If specified, then the length of this array  must be equal to the number of columns in the original HTML table. Use ‘null‘ where you wish to use only the default values and automatically detected options.

aoColumnDefs參數和aoColumns能夠一塊兒使用,儘管aoColumnDefs優先aoColumns的靈活性。 若是二者都使用,aoColumns定義將最高優先級。一樣,若是相同的列的目標是在aoColumnDefs屢次,第一個元素的數組將最高優先級,最後一個最低的。


aDataSort：定義一個列或多個列自定義排序

Default:	null Takes the value of the column index automatically
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
6.       { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
7.       { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $(‘#example‘).dataTable( {
14.     "aoColumns": [
15.       { "aDataSort": [ 0, 1 ] },
16.       { "aDataSort": [ 1, 0 ] },
17.       { "aDataSort": [ 2, 3, 4 ] },
18.       null,
19.       null
20.     ]
21.   } );
22. } );

asSorting：控制列的升序或降序到自定義列

Default:	[ ‘asc‘, ‘desc‘ ]
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
6.       { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
7.       { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $(‘#example‘).dataTable( {
14.     "aoColumns": [
15.       null,
16.       { "asSorting": [ "asc" ] },
17.       { "asSorting": [ "desc", "asc", "asc" ] },
18.       { "asSorting": [ "desc" ] },
19.       null
20.     ]
21.   } );
22. } );

bSearchable：設置列是否能被快速檢索框搜索到

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "bSearchable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $(‘#example‘).dataTable( {
11.     "aoColumns": [
12.       { "bSearchable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

bSortable： 啓用或禁用列排序。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "bSortable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $(‘#example‘).dataTable( {
11.     "aoColumns": [
12.       { "bSortable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

bUseRendered ：高版本已經廢棄這個屬性，沒有使用過，直接翻譯吧！當使用fnRender()爲一個列,您可能但願使用原始的數據(在呈現以前)進行排序和過濾(默認是用於呈現的數據,用戶能夠看到)。這多是有用的日期等。請注意,該選項已被棄用,將被刪除的下一個版本的datatable。請用mRender / mData而不是fnRender。

Default:	true
Type:	boolean

無例子代碼；
bVisible： 啓用或禁用本列顯示。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "bVisible": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $(‘#example‘).dataTable( {
11.     "aoColumns": [
12.       { "bVisible": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

fnCreatedCell：開發人員可定義的函數,就會調用一個細胞被建立(Ajax源等)或處理輸入(DOM源)。這能夠做爲一種恭維,mRender容許您修改DOM元素(例如添加背景顏色)當元素是可用的。

Default:
Type:	function

1. $(document).ready( function() {
2.   $(‘#example‘).dataTable( {
3.     "aoColumnDefs": [ {
4.       "aTargets": [3],
5.       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
6.         if ( sData == "1.7" ) {
7.           $(nTd).css(‘color‘, ‘blue‘)
8.         }
9.       }
10.     } ]
11.   });
12. } );

fnRender：高版本已經廢棄這個屬性。mRender這個代替

iDataSort：列索引(從0開始!),你想要執行一個在本專欄時被選中進行排序。這能夠用於排序在隱藏列例如。這個也沒使用過

Default:	-1 Use automatically calculated column index
Type:	int

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "iDataSort": 1, "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $(‘#example‘).dataTable( {
12.     "aoColumns": [
13.       { "iDataSort": 1 },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

mData：這個屬性能夠用來讀取JSON數據從任何數據源屬性,包括深層嵌套對象/屬性。能夠給mData在許多不一樣的方面影響其行爲:

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source.
• null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  
  • {array|object} The data source for the row
  • {string} The type call data requested - this will be ‘set‘ when setting data or ‘filter‘, ‘display‘, ‘type‘, ‘sort‘ or undefined when gathering data. Note that when undefined is given for the type DataTables expects to get the raw data for the object back
  • {*} Data to set when the second parameter is ‘set‘.
  The return value from the function is not required when ‘set‘ is the type of call, but otherwise the return is what will be used for the data requested.

Default:	null Use automatically calculated column index
Type:	string

1. // Read table data from objects
2. $(document).ready( function() {
3.   var oTable = $(‘#example‘).dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       { "mData": "platform.inner" },
9.       { "mData": "platform.details.0" },
10.       { "mData": "platform.details.1" }
11.     ]
12.   } );
13. } );
14. // Using mData as a function to provide different information for
15. // sorting, filtering and display. In this case, currency (price)
16. $(document).ready( function() {
17.   var oTable = $(‘#example‘).dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": function ( source, type, val ) {
21.         if (type === ‘set‘) {
22.           source.price = val;
23.           // Store the computed dislay and filter values for efficiency
24.           source.price_display = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val);
25.           source.price_filter  = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val)+" "+val;
26.           return;
27.         }
28.         else if (type === ‘display‘) {
29.           return source.price_display;
30.         }
31.         else if (type === ‘filter‘) {
32.           return source.price_filter;
33.         }
34.         // ‘sort‘, ‘type‘ and undefined all just use the integer
35.         return source.price;
36.       }
37.     } ]
38.   } );
39. } );

mRender ：This property is the rendering partner to mData and it is suggested that when you want to manipulate data for display (including filtering, sorting etc) but not altering the underlying data for the table, use this property. mData can actually do everything this property can and more, but this parameter is easier to use since there is no ‘set‘ option. Like mData is can be given in a number of different ways to effect its behaviour, with the addition of supporting array syntax for easy outputting of arrays (including arrays of objects):

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader should loop over the data source array. When characters are given between the array brackets, these characters are used to join the data source array together. For example: "accounts[, ].name" would result in a comma separated list with the ‘name‘ value from the ‘accounts‘ array of objects.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  
  • {array|object} The data source for the row (based on mData)
  • {string} The type call data requested - this will be ‘filter‘, ‘display‘, ‘type‘ or ‘sort‘.
  • {array|object} The full data source for the row (not based on mData)
  The return value from the function is what will be used for the data requested.

Default:	null Use mData
Type:	string

1. // Create a comma separated list from an array of objects
2. $(document).ready( function() {
3.   var oTable = $(‘#example‘).dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       {
9.         "mData": "platform",
10.         "mRender": "[, ].name"
11.       }
12.     ]
13.   } );
14. } );
15. // Use as a function to create a link from the data source
16. $(document).ready( function() {
17.   var oTable = $(‘#example‘).dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": "download_link",
21.       "mRender": function ( data, type, full ) {
22.         return ‘<a href="‘+data+‘">Download</a>‘;
23.       }
24.     } ]
25.   } );
26. } );

sCellType：Change the cell type created for the column - either TD cells or TH cells. This can be useful as TH cells have semantic meaning in the table body, allowing them to act as a header for a row (you may wish to add scope=‘row‘ to the TH elements).

Default:	td
Type:	string

1. // Make the first column use TH cells
2. $(document).ready( function() {
3.   var oTable = $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [ {
5.       "aTargets": [ 0 ],
6.       "sCellType": "th"
7.     } ]
8.   } );
9. } );

sClass：給列加上本身定義的屬性

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sClass": "my_class", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $(‘#example‘).dataTable( {
12.     "aoColumns": [
13.       { "sClass": "my_class" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

sContentPadding ：When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn‘t need this, and it is not documented on the general DataTables.net documentation

Default:	Empty string
Type:	string

1. // Using aoColumns
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumns": [
5.       null,
6.       null,
7.       null,
8.       {
9.         "sContentPadding": "mmm"
10.       }
11.     ]
12.   } );
13. } );

sDefaultContent ：Allows a default value to be given for a column‘s data, and will be used whenever a null data source is encountered (this can be because mData is set to null, or because the data source itself is null).

Default:	null
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       {
6.         "mData": null,
7.         "sDefaultContent": "Edit",
8.         "aTargets": [ -1 ]
9.       }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $(‘#example‘).dataTable( {
16.     "aoColumns": [
17.       null,
18.       null,
19.       null,
20.       {
21.         "mData": null,
22.         "sDefaultContent": "Edit"
23.       }
24.     ]
25.   } );
26. } );

sName：This parameter is only used in DataTables‘ server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sName": "engine", "aTargets": [ 0 ] },
6.       { "sName": "browser", "aTargets": [ 1 ] },
7.       { "sName": "platform", "aTargets": [ 2 ] },
8.       { "sName": "version", "aTargets": [ 3 ] },
9.       { "sName": "grade", "aTargets": [ 4 ] }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $(‘#example‘).dataTable( {
16.     "aoColumns": [
17.       { "sName": "engine" },
18.       { "sName": "browser" },
19.       { "sName": "platform" },
20.       { "sName": "version" },
21.       { "sName": "grade" }
22.     ]
23.   } );
24. } );

sSortDataType ：Defines a data source type for the sorting which can be used to read real-time information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.

Default:	std
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
6.       { "sType": "numeric", "aTargets": [ 3 ] },
7.       { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
8.       { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
9.     ]
10.   } );
11. } );
12. // Using aoColumns
13. $(document).ready( function() {
14.   $(‘#example‘).dataTable( {
15.     "aoColumns": [
16.       null,
17.       null,
18.       { "sSortDataType": "dom-text" },
19.       { "sSortDataType": "dom-text", "sType": "numeric" },
20.       { "sSortDataType": "dom-select" },
21.       { "sSortDataType": "dom-checkbox" }
22.     ]
23.   } );
24. } );

sTitle ：The title of this column.

Default:	null Derived from the ‘TH‘ value for this column in the original HTML table.
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sTitle": "My column title", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $(‘#example‘).dataTable( {
12.     "aoColumns": [
13.       { "sTitle": "My column title" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

sType：The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript‘s Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: ‘string‘, ‘numeric‘, ‘date‘ or ‘html‘ (by default). Further types can be adding through plug-ins.

Default:	null Auto-detected from raw data
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sType": "html", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $(‘#example‘).dataTable( {
12.     "aoColumns": [
13.       { "sType": "html" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

sWidth：Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applies ‘smart‘ widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

Default:	null Automatic
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $(‘#example‘).dataTable( {
4.     "aoColumnDefs": [
5.       { "sWidth": "20%", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $(‘#example‘).dataTable( {
12.     "aoColumns": [
13.       { "sWidth": "20%" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

 三：回調

fnCookieCallback：尚未使用過
$(document).ready( function () {
  $(‘#example‘).dataTable( {
    "fnCookieCallback": function (sName, oData, sExpires, sPath) {
      // Customise oData or sName or whatever else here
      return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
    }
  } );
} );

fnCreatedRow：顧名思義，建立行得時候的回調函數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnCreatedRow": function( nRow, aData, iDataIndex ) {
      // 爲a的話字體加粗
      if ( aData[4] == "A" )
      {
        $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );
      }
    }
  } );
} );

fnDrawCallback：draw畫 ，這個應該是重繪的回調函數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( ‘DataTables 重繪了‘ );
    }
  } );
} );

fnFooterCallback：底部的回調函數，這個能夠用來作總計之類的功能
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {
      nFoot.getElementsByTagName(‘th‘)[0].innerHTML = "Starting index is "+iStart;
    }
  } );
} )

fnFormatNumber：顧名思義，格式化數字的顯示方式
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnFormatNumber": function ( iIn ) {
      if ( iIn < 1000 ) {
        return iIn;
      } else {
        var
          s=(iIn+""),
          a=s.split(""), out="",
          iLen=s.length;
         
        for ( var i=0 ; i<iLen ; i++ ) {
          if ( i%3 === 0 && i !== 0 ) {
            out = "‘"+out;
          }
          out = a[iLen-i-1]+out;
        }
      }
      return out;
    };
  } );
} );

fnHeaderCallback：表頭的回調函數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
      nHead.getElementsByTagName(‘th‘)[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
    }
  } );
} )

fnInfoCallback：datatables信息的回調函數
$(‘#example‘).dataTable( {
  "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
    return iStart +" to "+ iEnd;
  }
} );

fnInitComplete：datatables初始化完畢後會調用這個方法
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnInitComplete": function(oSettings, json) {
      alert( ‘DataTables has finished its initialisation.‘ );
    }
  } );
} )

fnPreDrawCallback：每一次繪datatables時候調用的方法
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnPreDrawCallback": function( oSettings ) {
      if ( $(‘#test‘).val() == 1 ) {
        return false;
      }
    }
  } );
} );

fnRowCallback：行的回調函數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      // Bold the grade for all ‘A‘ grade browsers
      if ( aData[4] == "A" )
      {
        $(‘td:eq(4)‘, nRow).html( ‘<b>A</b>‘ );
      }
    }
  } );
} );

fnServerData：這個是結合服務器模式的回調函數，用來處理服務器返回過來的數據
// POST data to server
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "xhr.php",
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
      oSettings.jqXHR = $.ajax( {
        "dataType": ‘json‘,
        "type": "POST",
        "url": sSource,
        "data": aoData,
        "success": fnCallback
      } );
    }
  } );
} );

fnServerParams：向服務器傳額外的參數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php",
    "fnServerParams": function ( aoData ) {
      aoData.push( { "name": "more_data", "value": "my_value" } );
    }
  } );
} );

fnStateLoad：讀取狀態的回調函數
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateLoad": function (oSettings) {
      var o;
       
      // Send an Ajax request to the server to get the data. Note that
      // this is a synchronous request.
      $.ajax( {
        "url": "/state_load",
        "async": false,
        "dataType": "json",
        "success": function (json) {
          o = json;
        }
      } );
       
      return o;
    }
  } );
} );

fnStateLoadParams：和上面的不知道什麼區別，沒用過
// Remove a saved filter, so filtering is never loaded
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );
// Disallow state loading by returning false
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateLoadParams": function (oSettings, oData) {
      return false;
    }
  } );
} );

fnStateLoaded：又是這個，加了ed 不知道意思沒用過
// Show an alert with the filtering value that was saved
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateLoaded": function (oSettings, oData) {
      alert( ‘Saved filter was: ‘+oData.oSearch.sSearch );
    }
  } );
} );

fnStateSave：狀態儲存
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
      // Send an Ajax request to the server with the state object
      $.ajax( {
        "url": "/state_save",
        "data": oData,
        "dataType": "json",
        "method": "POST"
        "success": function () {}
      } );
    }
  } );
} );

fnStateSaveParams ：狀態儲存參數，沒用過，不明白
// Remove a saved filter, so filtering is never saved
$(document).ready( function() {
  $(‘#example‘).dataTable( {
    "bStateSave": true,
    "fnStateSaveParams": function (oSettings, oData) {
      oData.oSearch.sSearch = "";
    }
  } );
} );