Use the per-column filters and the global search box. Global search hits use one style, column-filter hits can use a reusable palette by column position, and specific columns can still override those colors.
In this demo: Name is a green named override, Department is a pink named override, Notes falls back to the palette, and the global search stays blue.
| Name | Department | Notes | Created |
|---|---|---|---|
| svc_backup | IT | Nightly backup job for Alpha cluster | 2025-01-01 |
| svc_deploy | IT | Bravo rollout — app servers | 2025-01-02 |
| alice | HR | Onboarding: Alpha / Bravo / Charlie | 2025-01-03 |
| bob | Finance | Quarterly report for Bravo region | 2025-01-04 |
| svc_sql | DBA | SQL maintenance window – Alpha and Delta | 2025-01-05 |
| carol | IT | Incident review: gamma outage | 2025-01-06 |
Highlights terms from both the global search box and per-column filters (includeColumnSearch: true) with distinct source-aware styling.
var table = $('#demoSearchHighlighterColumns').DataTable({
orderCellsTop: true,
searching: true,
searchHighlighter: {
includeColumnSearch: true,
minLength: 2,
cssVars: {
'--hfx-dt-search-hit-global-bg': '#dbeafe',
'--hfx-dt-search-hit-global-color': '#1e3a8a',
'--hfx-dt-search-hit-column-bg': '#fef3c7',
'--hfx-dt-search-hit-column-color': '#92400e'
},
globalHitStyle: {
css: { 'border-radius': '3px', 'padding': '0 2px' }
},
columnHitStyle: {
css: { 'border-radius': '3px', 'padding': '0 2px', 'font-weight': '600' }
},
columnHitStylePalette: [
{ backgroundColor: '#fef3c7', textColor: '#92400e' },
{ backgroundColor: '#cffafe', textColor: '#155e75' },
{ backgroundColor: '#ede9fe', textColor: '#5b21b6' },
{ backgroundColor: '#fee2e2', textColor: '#991b1b' }
],
columnHitStyles: {
Name: { backgroundColor: '#dcfce7', textColor: '#166534' },
Department: { backgroundColor: '#fce7f3', textColor: '#9d174d' }
}
}
});
// Bind per-column search boxes (second header row).
$('#demoSearchHighlighterColumns thead tr:eq(1) th').each(function (i) {
var input = $('input', this);
if (!input.length) return;
input.on('keyup change clear', function () {
if (table.column(i).search() !== this.value) {
table.column(i).search(this.value).draw();
}
});
});