Datatables學習文檔

Data sources 數據源
DataTables能夠從四種基本形式的數據源獲取數據：
HTML document (DOM) 
Javascript (array / objects)
Ajax sourced data with client-side processing
Ajax sourced data with server-side processing

一、在html表格數據上應用DateTables 
$(document).ready(function() {
    $('#example').dataTable();
} );

二、ajax數據
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

三、js數據，例子是用一個js數組初始化dt數據
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
    ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
    ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
    ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
    ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
    ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
    ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
    ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
    ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
    ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
    ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
    ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
    ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
    ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Epiphany 2.20','Gnome','1.8','A'],
    ['Webkit','Safari 1.2','OSX.3','125.5','A'],
    ['Webkit','Safari 1.3','OSX.3','312.8','A'],
    ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
    ['Webkit','Safari 3.0','OSX.4+','522.1','A'],
    ['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
    ['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
    ['Webkit','S60','S60','413','A'],
    ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
    ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
    ['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
    ['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
    ['Presto','Opera for Wii','Wii','-','A'],
    ['Presto','Nokia N800','N800','-','A'],
    ['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A¹'],
    ['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
    ['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
    ['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
    ['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
    ['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
    ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
    ['Misc','NetFront 3.1','Embedded devices','-','C'],
    ['Misc','NetFront 3.4','Embedded devices','-','A'],
    ['Misc','Dillo 0.8','Embedded devices','-','X'],
    ['Misc','Links','Text only','-','X'],
    ['Misc','Lynx','Text only','-','X'],
    ['Misc','IE Mobile','Windows Mobile 6','-','C'],
    ['Misc','PSP browser','PSP','-','C'],
    ['Other browsers','All others','-','-','U']
];
 
$(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
 
    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );

四、服務器端過程
有不少方法能夠把數據裝進dataTables裏，若是你正在使用一個很龐大的數據庫進行工做，你能夠考慮使用dataTables提供的服務器端選項，開啓服務器端進程後，全部的分頁、搜索、排序行爲都會被服務器端接手，服務器端的sql引擎(相似這麼個意思)就能夠在大量數據上進行這些操做(畢竟數據庫引擎纔是爲這項工做而生的)。如此，表格裏的每一行會用新的ajax請求來獲取它所需的信息。
服務器端過程打開方法：把選項serverSide設爲true，而後用ajax選項提交一份ajax數據，例子展現了一個簡單的表格，這個例子用的是服務器端過程。更復雜的用法看後面對服務器端過程使用的詳細介紹。
eg:---------------------
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );




=============下面是API：============================================
===================================================================
Add rows 添加行
新的行能夠用 row.add方法，多行數據可使用rows.add方法，注意想要看到新加的行須要使用draw() 方法，這個方法是dataTables在發生變化時調用的，很容易使用。
下面例子展現了每次單擊按鈕添加一行的功能。
$(document).ready(function() {
    var t = $('#example').DataTable();
    var counter = 1;
 
    $('#addRow').on( 'click', function () {
        t.row.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw();
 
        counter++;
    } );
 
    // Automatically add a first row of data
    $('#addRow').click();
} );


規定搜索功能僅對某一列有效
dt提供的搜索功能頗有用，它可讓你迅速搜索表格裏的信息，可是它的做用範圍是整個表格的全部數據，有時候咱們可能只想在某個單獨的列使用搜索用能，DataTables提供了這個功能，使用column().search()方法能夠指定搜索結果是來自哪一列的。列的搜索是能夠相互累加的，你能夠進行多列的搜索，給用戶提供更多複雜的搜索功能。
This examples shows text elements being used with the column().search()DT method to add input controls in the footer of the table for each column. Note that the *index*:visible option is used for the column selector to ensure that the column()DT method takes into account any hidden columns when selecting the column to act upon.
code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
} );


高亮顯示列Highlighting rows and columns 
//Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.

//This example shows that in action on DataTable by making use of the cell().index()DT method to get the index of the column that is to be operated on, and then the cells().nodes()DT and column().nodes()DT methods to remove old classes and apply the new highlighted class, respectively.
//－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
    var lastIdx = null;
    var table = $('#example').DataTable();
     
    $('#example tbody')
        .on( 'mouseover', 'td', function () {
            var colIdx = table.cell(this).index().column;
 
            if ( colIdx !== lastIdx ) {
                $( table.cells().nodes() ).removeClass( 'highlight' );
                $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
            }
        } )
        .on( 'mouseleave', function () {
            $( table.cells().nodes() ).removeClass( 'highlight' );
        } );
} );


Child rows (show extra / detailed information) 子行（http://datatables.net/examples/api/row_details.html）
給一個行添加下級子行，用於展現額外信息。
The example below makes use of the row().childDT methods to firstly check if a row is already displayed, and if so hide it (row().child.hide()DT), otherwise show it (row().child.show()DT). The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );


Row selection (multiple rows) （多）行的選取，這個有點相似checkbox的功能
rows().data() 經過點擊事件添加和移除選中狀態。
例子：count選中的行數
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 
    $('#button').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );
} );


Row selection and deletion (single row) 行的選取，只能選擇一行，有點相似 input[type=radio]
示例展現了一個修改表格內容的例子，每次只有一行能夠被選中，它所做的操做是檢測當前的目標行，若是已經選中則取消選擇，若是沒有則取消其餘行的選擇並選擇當前行。使用row().delete()方法刪除行，使用draw()方法，它的第一個參數設爲false ，這會從新拉取表格數據而保持在當前頁不變。（若是沒有這個參數，刪除數據後分頁會跳回第一頁）
更多選擇行並進行各類操做的複雜的用法看這裏http://datatables.net/extensions/tabletools/
例子：
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
 
    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );


Form inputs 表單輸入
爲了實現分頁、排序、搜索等功能，DataTables會將不須要展現的行和單元格從當前DOM移除，這麼作提高了性能和兼容性，可是這意味着提交一個跨幾個分頁點表單會有點問題，須要咱們進行一些額外的工做來獲取不在當前頁面的信息。
DT的$()方法能夠用於獲取文檔的內容而不用考慮分頁、排序帶來的問題。下面例子展現了用$()獲取表格中全部輸入數據。
code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('button').click( function() {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 0, 120 )+'...'
        );
        return false;
    } );
} );


Index Column 索引列
高交互性的表格常常須要一個‘counter’來標記每一行處的位置，這一行是不支持排序的，而且隨着數據的動態變化每一個索引對應的行會動態變化。
例子展現了DataTables是如何實現這個功能的，第一列是counter列，而且搜索和排序時會動態更新。這是經過監聽表格的order和search事件實現的，當檢測到這些事件的發生時，column().nodes()方法被調用用於獲取目標列的TH/TD指針，each()方法迭代每一行數據並給他們設置所需的不一樣內容。
filter和order選項經過當前生效的filter被用於cloumn()方法來獲取當前排序的指針。（翻譯的有點問題，看原文：http://datatables.net/examples/api/counter_columns.html）
code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
    var t = $('#example').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
 
    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );


動態顯示和隱藏行 Show / hide columns dynamically 
例子展現了怎麼使用column().visible()方法去動態顯示和隱藏一個列。這個例子還設置了滾動，只是爲了展現滾動在這裏被支持，但它並非必須的。
另外，幾個列能夠同時被隱藏和顯示，只需使用columns()方法選中多列，再用columns().visible()方法設置可見性狀態。
If you are looking for a more complete column visibility interaction controls ColVis for DataTables
 provides a complete interface for allowing the user to show and hide columns in the table.
若是你須要更加詳細的列顯示狀態交互，DataTables的ColVis （http://datatables.net/extensions/colvis/）提供了一些完整的接口來控制列的顯示和隱藏。
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );
 
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );



Using API in callbacks 在回調方法中使用api
有時候你也許須要在dt回調方法(例如：initComplete, roeCallback 等)裏面使用api，可是這有一個問題就是對象並無徹底初始化完，因此你沒法把結果賦給一個值並在回調裏面使用，可是，全部的dt回調是在dt實例裏面完成的，因此你可使用javascript的特殊變量this來獲取，this.api() 會獲取一個指向表格的api實例。
在這個例子中，$() 方法被用來獲取表格中全部的單元格指針，而後給他們添加了一些行爲(例子中是一個點擊事件)，在這邊所作的是給表格加了一個filter(搜索)，每次點擊每一個單元格，裏面的值會被用做搜索框裏的參數過濾數據。其實這也並無什麼，咱們能夠在在表格加載完畢時給它添加一個delegate事件來實現一樣的功能，這裏只是爲了展現如何在callback裏面使用api； 

$(document).ready(function() {
    $('#example').dataTable( {
        "initComplete": function () {
            var api = this.api();
            api.$('td').click( function () {
                api.search( this.innerHTML ).draw();
            } );
        }
    } );
} );


Ajax---------------
從嵌套的json數據獲取表格數據列
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "ajax": "data/objects_deep.txt",
        "columns": [
            { "data": "name" },
            { "data": "hr.position" },
            { "data": "contact.0" },
            { "data": "contact.1" },
            { "data": "hr.start_date" },
            { "data": "hr.salary" }
        ]
    } );
} );
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
{
  "data": [
    {
      "name": "Tiger Nixon",
      "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
      },
      "contact": [
        "Edinburgh",
        "5421"
      ]
    },
    {
      "name": "Garrett Winters",
      "hr": {
        "position": "Accountant",
        "salary": "$170,750",
        "start_date": "2011/07/25"
      },
      "contact": [
        "Tokyo",
        "8422"
      ]
    }]
 }



 從嵌套的數組獲取數據
 $(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/objects_subarrays.txt",
        "columns": [
            { "data": "name[, ]" },
            { "data": "hr.0" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "hr.2" },
            { "data": "hr.1" }
        ]
    } );
} );

 {
    "name": [
        "Nixon",
        "Tiger"
    ],
    "hr": [
        "System Architect",
        "$3,120",
        "2011/04/25"
    ],
    "office": "Edinburgh",
    "extn": "5421"
}
//Name列是從一個包含兩個元素的name數組裏獲取的，展現時數組中的元素會自動被串聯起來，name[,]括號裏面的分隔符會被用作鏈接數組元素的鏈接符。
//下面的hr.1 hr.2直接經過數組下標獲取單獨的數組元素。


在列裏生成額外內容
// columns.renderDT for content that is dynamic (i.e. based upon the row's data)
// columns.defaultContentDT for static content (i.e. simple strings)
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "defaultContent": "<button>Click!</button>"
        } ]
    } );
 
    $('#example tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );
// 在每列加了一個按鈕，並添加了顯示行內信息的點擊事件。


//自定義數據源參數 Custom data source property
//當從ajax獲取數據時，dt會默認讀取'data'參數，（它假設默認你的json是這樣子的 { "data": [...] }）,若是你使用的參數不是'data'而是別的，可使用dataSrc選項來自定義。
// 它有幾種使用方法 一、dataSrc:"myDataName" , 傳遞一個字符串，告訴他咱們的數據是 { "myDataName": [...] }; 二、dataSrc:'' ,空字符串，說明數據不是對象，是一個數組；三、dataSrc: function(json) {}) ,dataSrc爲一個方法，這個方法能夠返回咱們須要的數據形式，好比ni能夠在這個方法裏讀取一個xml文件並返回咱們須要的json格式數據。
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": {
            "url": "data/arrays_custom_prop.txt",
            "dataSrc": "demo"
        }
    } );
} );
-----------------------------------------------
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": {
            "url": "data/objects_root_array.txt",
            "dataSrc": ""
        },
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );


//Deferred rendering for speed
//When deferred rendering is enabled, rather than having DataTables create all TR and TD nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant performance increase, since a lot less work is done at initialisation time.
--------------------------------------
$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "data/arrays.txt",
        "deferRender": true
    } );
} );


Custom filtering - range search 範圍的篩選
$.fn.dataTable.ext.search
--------------------------------------
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );