$('#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 } ] });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter