JQuery Datatables Columns API 引數詳細說明

風靈使發表於2018-08-01
jQueryAPI

Data Tables: http://datatables.net/

Version: 1.10.0

Columns說明

雖然我們可以通過DOM直接獲取DataTables元素的資訊，但是DataTables提供了更方便的方法，可以自定義列的屬性。下邊就讓我們一起來學習DataTables是怎麼來定義列屬性的。

  • DataTables提供了兩個引數來定義列屬性：columns 和 columnDefs (原始碼裡：aoColumns和 aoColumnDefs)
  • 為了使用者定義的引數更易於理解，DataTables提供的使用者引數名和原始碼的引數名是不一樣的，不過這兩個引數名，不管使用哪個，最終效果是一樣的。（＊以下引數說明都是使用者使用引數名）

columns 和 columnDefs的區別：

  • 相同點：達到相同的效果
  • 不同點：作用不一樣，使用不一樣（需要一個目標屬性在每個定義的物件（columnDefs.targetsDT））
  • columns：設定特定列的初始化屬性，可以定義陣列設定多列，陣列長度必須等於表格的數量，只想使用預設值可以設為“NULL”，陣列每個元素只能設定單列的屬性。
  • columnDefs：與columns非常相似，該陣列可以針對特定的列，多列或者所有列定義。陣列可以任意長度。通過targets引數設定一個列或者多列，該屬性定義可以如下：
    • 0或正整數 - 從左邊的列索引計數
    • 負整數 - 列索引從右邊計數
    • 一個字串 - 類名稱將被匹配上的TH為列
    • 字串“_all” - 所有的列（即指定一個預設值）
  • 兩個引數可以同時使用，但是columns定義的優先順序最高。
  • 當columnDefs裡對同一列有多個定義時，最開始的定義優先順序最高。

example：

$('#example').dataTable(  
    {  
        data: [  
                {  
                    "name":    "Tiger Nixon1",  
                    "position":   "System Architect1",  
                    "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
                    "salary":    "$3,1201",  
                    "start_date": "2011/04/25",  
                    "office":    "Edinburgh1",  
                    "extn":    "54211"  
                },  
                {  
                    "name":    "Tiger Nixon2",  
                    "position":   "System Architect2",  
                    "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
                    "salary":    "$3,1202",  
                    "start_date": "2011/04/25",  
                    "office":    "Edinburgh2",  
                    "extn":    "54212"  
                },  
                {  
                    "name":    "Tiger Nixon3",  
                    "position":   "System Architect3",  
                    "phone": { "plain": 5552368, "filter": "5552368 555-2368", "display": "555-2368" },  
                    "salary":    "$3,1203",  
                    "start_date": "2011/04/25",  
                    "office":    "Edinburgh3",  
                    "extn":    "54213"  
                }  

        ],  

        columnDefs: [  
            {  
                "targets": 0,  
                "searchable": false  
            },  
            {  
                "targets": [1,2,3],  
                "orderData": [ 2, 3, 4 ],  
                "searchable": false  
            },  
            {  
                "targets": [-3,-4],  
                "orderable": false,  
                "searchable": false  
            }  
        ],  

        columns: [  
            { "name": "name",   
              "cellType": "th",  
              "orderDataType": "dom-text",  
              "orderSequence": [ "desc","asc", "asc" ],  
              "className": "my_class",  
              "contentPadding": "mmm",  
              "createdCell": function (td, cellData, rowData, row, col) {  
                  if ( row < 1 ) {  
                    $(td).css('color', 'red');  
                  }  
                },  
              "data": "name",   
              "searchable": true,   
              "title": "My Name"  
            },  
            {   
                "data": "position",  
                "render": function ( data, type, full, meta ) {  
                    return '<a href="'+data+'">' + data + '</a>';  
                }  
            },  
            {  
                "data": 'phone',  
                "render": {  
                  "_": "plain",  
                  "filter": "filter",  
                  "display": "display"  
                }  
            },  
            { "data": "office" },  
            { "data": "start_date", "type": "date" },  
            { "data": "extn", "visible": false},  
            { "data": "salary", "width": "20px"  },  
            {  
                "data": null,  
                "orderable": false,  
                "defaultContent": "<button>Edit</button>"  
            }  

        ]  
    }  
);

引數詳解：

使用者引數名 原始碼引數名 英文解釋 中文解釋
cellType sCellType Cell type to be created for a column 設定列標籤的型別（ex：th，td）
className sClass Class to assign to each cell in the column 設定列的class屬性值
contentPadding sContentPadding Add padding to the text content used when calculating the optimal with for a table. 設定填充內容，以計算與優化為一個表時所使用的文字內容，一般不需要設定
createdCell fnCreatedCell Cell created callback to allow DOM manipulation 設定cell建立完後的回撥函式，設定背景色或者新增行
data mData Set the data source for the column from the rows data object / array 設定單元格里的值
defaultContent sDefaultContent Set default, static, content for a column 設定列的預設值
name sName Set a descriptive name for a column 設定列的描述性名稱
orderable bSortable Enable or disable ordering on this column 設定列是否可以排序
orderData aDataSort Define multiple column ordering as the default order for a column 設定多列排序時列的預設順序
orderDataType sSortDataType Live DOM sorting type assignment
orderSequence asSorting Order direction application sequence 設定列的預設排序，可以改變列排序的順序處理
render mRender Render (process) the data for use in the table
searchable bSearchable Enable or disable filtering on the data in this column 設定列的資料是否過濾
title sTitle Set the column title 設定列的標題
type sType Set the column type - used for filtering and sorting string processing.Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available. 設定列的型別，用於過濾和排序的字串處理。
visible bVisible Enable or disable the display of this column 設定列是否顯示
width sWidth Column width assignment 定義列的寬度

jQuery DataTables外掛 aoColumnDefs和aoColumns的用法

aoColumnDefs和aoColumns都可以設定列的屬性。

aoColumnDefs設定列的屬性時，可以任意指定列，並且不需要給所有列都設定。

aoColumns設定列時，不可以任意指定列，必須列出所有列。如果某一列不需要設定，則要賦值null。

如果aoColumnDefs和aoColumns同時給同一列的同一個屬性設定了值，那麼aoColumns的優先順序要高。

另外，如果aoColumnDefs使用 target :["_all"] 給所有列設定了通用的屬性，然後又為某一列的該屬性單獨設定了值，那麼這兩個設定先設定的優先順序高，例如：

aoColumnDefs : [  
    {  
        "aTargets" :　[1],  
        "mRender" : function(data, type, full){  
            return 100;  
        }  
    },  
     {  
        "aTargets" :　["_all"],  
        "mRender" : function(data, type, full){  
            return 200;  
        }  
    }  
]

則aTargets是1的設定的優先順序高。

如果寫成：

aoColumnDefs : [  
    {  
        "aTargets" :　["_all"],  
        "mRender" : function(data, type, full){  
            return 200;  
        }  
    },  
    {  
        "aTargets" :　[1],  
        "mRender" : function(data, type, full){  
            return 100;  
        }  
    }  
]

則aTargets是”_all“的優先順序高

相關文章