JS dataTables

原文地址：

http://www.cnblogs.com/haogj/archive/2011/03/04/1971328.html

 

數據來源有四種：

1. 網頁DOM對象

$(document).ready(function () {

    $(‘#example').dataTable;

)};

 

2. 數組

aaData 變量類型爲數組，其中每一個元素是一個數組，表明一行內容

每一個表示行的元素，數組長度必須相同，不然出錯

aoColumns 定義表格的列

對列對象，sTitle定義列的標題，sClass定義列的樣式

 

3. AJAX, 經過向服務器發出請求得到

以Ajax方式直接獲取服務器上的符合aaData格式的文件內容

 

4. 服務器

sAjaxSouce 指定ajax對象的url，一般爲get方式，可經過鏈接?parm1=a&parm2=b...的方式附加get的參數。在服務器端經過req.query.parm1的方式獲取參數。返回數據必須爲JSON格式。

 

服務器端應返回JSON格式的數據：

iTotalRecords    int    實際行數

iTotalDisplayRecords    int    過濾後的實際行數

sEcho    String    來自客戶端的sEcho無變更的複製品

sColumns    String    可選，逗號分隔的列名

aaData    array array mixed    表格中的實際數據

 

基本設置：

dataTables表格在頁面上必須經過thead和tbody進行說明

在聲明thead時可否指定表格第一行的樣式？

 

設置參數

bPaginate    是否分頁，默認爲true，分頁

iDisplayLength    每頁顯示行數，默認爲10

sPaginationType    分頁樣式，two_buttons 默認選項，只有上一頁下一頁按鈕；full_numbers 包括頁數導航

bLengthChange    是否容許用戶經過下拉列表選取分頁行數，10，25，50， 100。須要bPaginate支持，默認爲true

bFilter    啓用或禁止過濾，默認爲true。若是設置啓用但要關閉默認的過濾輸入框，應使用sDom

bInfo    是否容許顯示列表信息，默認爲true

 

參數設置方法：

$(function () {

    $(‘#example’).dataTable(

    {

        iDisplayLength: 20,

        sPaginationType: full_numbers 

     });

});