datatables 参数详解

datatables 参数详解：

method: ‘get’, //请求方式（*）
toolbar: ‘#toolbar’, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: “asc”, //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: “client”, //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: “ID”, //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表

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：
Js代码 收藏代码

$('#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>"  
            }  

        ]  
    }  
);  

参考资料：http://datatables.net/reference/option/