JQuery Datatable是一款十分優秀的表格插件,可以快速和輕松地創建排序、分頁、搜索功能等,用來展示數據非常方便。此插件還支持一些事件允許我們對其表現或行為進行一些自定義。
$(document).ready(function() {
$('#example').DataTable();
$('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
});
上面的代碼中,當點擊行觸發'點擊'事件??梢允褂?table().row()方法獲取數據,然后彈出窗口提醒用戶點擊了第幾行。另外,在此事件中,還有一些其他的屬性可以獲取,如列位置、列數據等。這些屬性可以在'column()'和'data()'方法中,定義在表格中的列中使用。
// Select row
$(table.row(':eq(0)', { page: 'current' }).node()).addClass('selected');
// Deselect row
$(table.row('.selected').node()).removeClass('selected');
上述代碼演示了如何選擇或取消選擇某行。要選擇任意一行,請使用.row()方法,以任意樣式類添加行的選擇狀態,使用.node()獲取當前選擇的元素的節點。
還可以使用'.search()'方法給表格添加搜索功能。
//Search Field Events
$('#example_filter input').keyup( function () {
table.search( this.value ).draw();
} );
JQuery Datatable的事件讓您可以輕松地自定義插件的表現,為用戶提供更多應用程序的選項和交互。