色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jQuery dataTables 復選

榮姿康2年前9瀏覽0評論

jQuery dataTables 是一款非常強大的數據表格插件,可以輕松地通過其中的API對表格進行各種操作,其中一個重要的功能就是支持復選框,使用戶可以方便地選擇自己需要的數據,而無需頻繁地進行查詢或篩選。

$(document).ready(function() {
// 初始化 dataTables
var table = $('#example').DataTable({
// 設置數據源
ajax: "/api/data",
// 設置列配置
columns: [
{ data: "id", title: "#"},
{ data: "name", title: "名稱" },
{ data: "age", title: "年齡" },
{ data: "gender", title: "性別" }
],
// 啟用行選擇功能
select: {
style: 'multi',
selector: 'td:first-child'
}
});
// 監聽選擇事件
table.on( 'select', function ( e, dt, type, indexes ) {
// 獲取選中行的數據
var selectedData = table.rows( indexes ).data();
// 執行自定義操作
console.log( "選中數據:", selectedData );
});
} );

在代碼中,我們可以先初始化 dataTables,并通過ajax屬性設置數據源。接著,我們通過columns屬性對表格的列進行配置,包括每一列所對應的數據字段和表頭名稱。在啟用復選框功能前,我們先通過selector屬性指定需要響應選擇事件的元素,這里我們指定為表格行的第一個單元格。

接下來,在表格對象上添加select屬性啟用行選擇功能,通過style屬性指定選擇樣式,這里我們選擇了多選。通過綁定select事件,我們可以監聽到所有選擇事件,將選中數據作為參數執行自定義操作。

使用 dataTables 的復選框功能可以極大地方便了數據的查詢和篩選,并且可以快速地獲取到選中數據進行相關操作,是一個非常實用的功能。在實際應用中,我們可以根據自己的需求進行相應地配置和實現。