$('#example').DataTable({
dom: 'Bfrtip', // Configure the order of the components: Buttons, filtering, processing, table, and paging
select: {
style: 'multi', // Enable multiple row selection
selector: 'td:not(:last-child)', // Only allow selecting rows by clicking on cells, except for the last column
info: true, // Show the number of selected rows in the table information element
blurable: false, // Do not deselect rows when clicking outside the table
items: 'row', // Select items by row
toggleable: true // Allow rows to be deselected
},
searchPanes: {
threshold: 4,
initCollapsed: true
},
buttons: [
{
extend: 'selected', // Make the button available only when a row is selected
text: 'Selected Rows Action',
action: function (e, dt, node, config) {
const selectedRows = dt.rows({selected: true}).data();
alert('You have selected ' + selectedRows.count() + ' rows');
}
},
{
extend: 'selectAll', // Create a button to select all rows
text: 'Select All Rows'
},
{
extend: 'selectNone', // Create a button to deselect all rows
text: 'Deselect All Rows'
}
],
columnDefs: [
{
searchPanes: {
show: true,
options: [
{
label: 'Custom Filter',
value: function(rowData, rowIdx) {
return rowData.someColumn === 'Some Value'; // Apply a custom filter based on the rowData
}
}
]
},
targets: [0] // Apply the searchPane settings to the first column
}
]
});
Comments