jQuery DataTable是一種常用的數據表格插件,它具有豐富的功能和靈活的配置。其中,單行選中是一種常見的需求。本文介紹如何實現jQuery DataTable的單行選中功能。
首先,需要使用jQuery DataTable插件創建表格。在插件的基礎上,可以通過添加一些配置選項來實現單行選中。其中,最重要的配置選項是rowCallback。
$(document).ready(function() { $('#example').DataTable({ "rowCallback": function(row, data) { $(row).click(function() { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); } }); });
在上述代碼中,當表格中的一行被點擊時,如果已經被選中,那么就取消選中狀態;否則,就取消先前被選中的行的選中狀態,并將當前行標記為選中。
為了實現這些功能,需要為選中的行添加一個CSS類。可以通過CSS樣式來定義選中行的顏色、背景等樣式。
table.dataTable tbody tr.selected { background-color: #ddd; }
通過上述代碼,可以實現選中行的樣式效果。
通過以上配置,就可以實現jQuery DataTable的單行選中功能了。當需要選中多行時,只需要將選擇標記改為復選框即可。