Search Highlighter — Column Search

Use the per-column filters and the global search box. Hits from both are highlighted (default behavior).

Name Department Notes Created
svc_backupITNightly backup job for Alpha cluster2025-01-01
svc_deployITBravo rollout — app servers2025-01-02
aliceHROnboarding: Alpha / Bravo / Charlie2025-01-03
bobFinanceQuarterly report for Bravo region2025-01-04
svc_sqlDBASQL maintenance window – Alpha and Delta2025-01-05
carolITIncident review: gamma outage2025-01-06

About this example

Highlights terms from both the global search box and per-column filters (includeColumnSearch: true).

Configuration

var table = $('#demoSearchHighlighterColumns').DataTable({
  orderCellsTop: true,
  searching: true,
  searchHighlighter: {
    includeColumnSearch: true,
    minLength: 2,
    hitStyle: {
      backgroundColor: '#f3d9fa',
      textColor: '#2b0a3d',
      css: { 'border-radius': '3px', 'padding': '0 2px' }
    }
  }
});

// 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();
    }
  });
});