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 的復選框功能可以極大地方便了數據的查詢和篩選,并且可以快速地獲取到選中數據進行相關操作,是一個非常實用的功能。在實際應用中,我們可以根據自己的需求進行相應地配置和實現。
上一篇關于css中的背景屬性
下一篇關與css嵌套