1.说明
DataTables高级初始化比基本初始化提供更多扩展选项设置,你可以通过选项的组合和回调展现表格所需的内容。
1.1 DOM/jQuery事件
本示例是通过jQuery的方法使用委托事件,当用户点击某一行,弹出该行首列字段内容。
脚本:
<script>
$(document).ready(function () {
var table = $('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row(this).data();
alert('You clicked on ' + data[0] + "'s row");
});
});
</script>
效果图:
1.2 DataTables 事件
DataTables提供很多自定义事件,你可以通过jQuery方式绑定这些事件,需要注意的是必须使用dt这个命名空间。
本示例通过页面的显示调用的时间,从而确认顺序、搜索和页面事件已被使用。
脚本:
$(document).ready(function () {
var eventFired = function (type) {
var n = $('#demo_info')[0];
n.innerHTML += '<div>' + type + ' event - ' + new Date().getTime() + '</div>';
n.scrollTop = n.scrollHeight;
};
$('#example')
.on('order.dt', function () {
eventFired('Order');
})
.on('search.dt', function () {
eventFired('Search');
})
.on('page.dt', function () {
eventFired('Page');
})
.DataTable();
});
效果图:
1.3 DataTables列渲染
每一列都有可选呈现空间columns.render,可以用于添加链接、根据内容规则分配颜色以及其他形式的文本操作。
本示例在第一列显示了年龄以及姓名,隐藏年龄列。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable({
columnDefs: [
{
render: function (data, type, row) {
return data + ' (' + row[3] + ')';
},
targets: 0,
},
{ visible: false, targets: [3] },
],
});
});
</script>
效果图:
1.4 输入要搜索的关键字
Datatables提供的搜索框是响应式的,输入每一个字符便搜索一次。当表格有大量数据时,多次搜索会增加处理时间。
本示例通过使用search.return,以便仅在按下Enter键时触发搜索。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable({
search: {
return: true,
},
});
});
</script>
效果图:
1.5 页面长度选项
使用lengthMenu Option初始化选项,可以自定义长度菜单中显示的选项。
第一个数组用于定义值选项,第二个数组用于显示选项。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable({
lengthMenu: [
[10, 25, 50, -1], // 定义值选项
[10, 25, 50, 'All'],// 用于显示选项
],
});
});
</script>
效果图:
1.6 多个表控制元素
Datatables可以使用dom创建表控件的多个实例,这些控件可以全部同步。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable({
dom: '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
});
});
</script>
样式:
<style type="text/css">
div.dataTables_length {
padding-left: 2em;
}
div.dataTables_length,
div.dataTables_filter {
padding-top: 0.55em;
}
</style>
效果图:
红框的4个内置的表控制元素一一对应。
1.7 列设置可见性的复杂标题
本示例显示了一个在联系人信息上跨多个单元格的标题,其中一列是隐藏的。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable({
columnDefs: [
{
visible: false,
targets: -1,
},
],
});
});
</script>
HTML:
效果图:
1.8 将HTML读取到数据对象
当DataTables从HTML表读取表内容时,默认情况下,它会将表中的信息读取到DataTables内部存储的数组中。每个数组元素表示一列。
脚本:
$(document).ready(function () {
$('#example').DataTable({
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'start_date' },
{ data: 'salary' },
],
});
});
1.9 HTML5数据属性-单元格数据
本示例显示数据排序data-sort和数据过滤data-filter属性的使用。
脚本:
$(document).ready(function () {
$('#example').DataTable();
});
HTML:
效果图:
1.10 HTML5数据属性-表选项
从DataTables1.10.5开始,可以用数据属性定义初始化选项。
脚本:
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
HTML:
<table id="example" class="display" width="100%" data-page-length="5" data-order="[[ 1, "asc" ]]">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th data-orderable="false">Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>T. Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>Mon 25th Apr 11</td>
<td>$320,800/y</td>
</tr>
<tr>
<td>G. Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>Mon 25th Jul 11</td>
<td>$170,750/y</td>
</tr>
<tr>
<td>A. Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>Mon 12th Jan 09</td>
<td>$86,000/y</td>
</tr>
<tr>
<td>C. Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>Thu 29th Mar 12</td>
<td>$433,060/y</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
1.11 设置默认值
使用$.fn.dataTable.defaults对象将初始化默认值设置为公共值,该对象可以保存DataTables初始化对象的所有参数。
本示例在初始化时禁用DataTables的搜索和排序功能。
脚本:
<script>
$.extend(true, $.fn.dataTable.defaults, {
searching: false,
ordering: false,
});
$(document).ready(function () {
$('#example').DataTable();
});
</script>
1.12 行创建回调
脚本:
$(document).ready(function () {
$('#example').DataTable({
createdRow: function (row, data, index) {
if (data[5].replace(/[\$,]/g, '') * 1 > 150000) {
$('td', row).eq(5).addClass('highlight');
}
},
});
});
样式:
<style type="text/css">
td.highlight {
font-weight: bold;
color: red;
}
</style>
效果图:
1.13行分组
DataTables提供一个对行分组的API。
脚本:
<script>
$(document).ready(function () {
var groupColumn = 2;
var table = $('#example').DataTable({
columnDefs: [{ visible: false, targets: groupColumn }],
order: [[groupColumn, 'asc']],
displayLength: 25,
drawCallback: function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(groupColumn, { page: 'current' })
.data()
.each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');
last = group;
}
});
},
});
$('#example tbody').on('click', 'tr.group', function () {
var currentOrder = table.order()[0];
if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
table.order([groupColumn, 'desc']).draw();
} else {
table.order([groupColumn, 'asc']).draw();
}
});
});
</script>
样式:
<style type="text/css">
tr.group,
tr.group:hover {
background-color: #ddd !important;
}
</style>
效果图:
1.14页脚回调
页脚:
<script>
$(document).ready(function () {
$('#example').DataTable({
footerCallback: function (row, data, start, end, display) {
var api = this.api();
// 删除格式以获取用于求和的整数数据
var intVal = function (i) {
return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
};
// 所有页面总计
total = api
.column(4)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// 本页总计
pageTotal = api
.column(4, { page: 'current' })
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// 更新页脚
$(api.column(4).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
},
});
});
</script>
样式:
<style type="text/css">
th { white-space: nowrap; }
</style>
效果图: