每个控件元素在数据表都有一个关联的单个字母。
l
— 每页显示行数的控件(显示选择每页显示条数的下拉框)
f
— 检索条件的控件(搜索框的关联字母)
t
— 表格控件(显示表格的关联字母)
i
— 表信息总结的控件(比如显示 - 第 1 页 / 总 5 页和过滤总件数 _MAX_
条等总结信息)
p
— 分页控件(显示上一页12345…下一页的关联字母)
r
— 处理中的控件(显示处理中…加载中…等)
还可以在控件元素外添加DIV
和Class
,语法如下
<and>
— DIV元素
<"class" and>
— DIV和Class
<"#id" and>
— DIV和ID
如:
"dom": 'lfrtip',//这些功能默认的位置是这样的每个字母的先后代表每个功能输出在页面上的先后
"dom": 'lrtip' 页面少了f --- 检索条件的控件(搜索框)
例子:
var data1 = [{
"name": "aaTiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}, {
"name": "aaGarrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
},
];
$(document).ready(function () {
$('#table_id').DataTable({
//"dom": '<"bbb"lfrtip>',//这些功能默认的位置是这样的
dom: 'B<"toolbar">frtip',
"buttons": [{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}],
data: data1,
columns: [{
data: 'name'
}, {
data: 'position'
}, /*注意这里的数据要和table<th>要一一对应*/ {
data: 'salary'
}, {
data: 'office'
}, {
data: 'extn'
}
],
'language': {
"emptyTable": "没有数据",
"info": "从 _TOTAL_ 数据中显示 _START_ 到 _END_ 条数据",
"infoEmpty": "从0条记录中显示0到0条记录",
"infoFiltered": "(查询筛选时总共过滤 _MAX_ 条)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "每页显示 _MENU_ 记录(数据)",
"loadingRecords": "加载中...",
"processing": "查询中...",
"search": "查询筛选:",
"zeroRecords": "没有数据",
"paginate": {
"first": "首页",
"last": "尾页",
"next": "下一页",
"previous": "上一页"
},
"aria": {
"sortAscending": ": 激活列升序排序",
"sortDescending": ": 激活列降序排序"
},
'info': '第 _PAGE_ 页 / 总 _PAGES_ 页', //加上这条 language里的info会被覆盖将不再显示
'infoEmpty': '没有数据', //加上这条 language里的emptyTable会被覆盖将不再显示
'infoFiltered': '(过滤总件数 _MAX_ 条)' //加上这条 language里的infoFiltered会被覆盖将不再显示
}
//paging:false,//分页
//scrolly:400,//滚动条
//分页和滚动条是连用的因为如果分页默认是开着的那么滚动条是无效的貌似只将分页关掉也会有滚动条出现
});
$("div.toolbar").html('<b style="color:red">自定义文字图片等。。。</>');
});