From 097050f042e47c5c10ae6281a3c5749960bdf203 Mon Sep 17 00:00:00 2001 From: mdeniz Date: Fri, 29 Jul 2016 11:45:51 +0200 Subject: [PATCH] Add column search/filtering highlight --- features/searchHighlight/dataTables.searchHighlight.css | 5 +++++ features/searchHighlight/dataTables.searchHighlight.js | 8 +++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/features/searchHighlight/dataTables.searchHighlight.css b/features/searchHighlight/dataTables.searchHighlight.css index 10a03e6..a1e43d4 100644 --- a/features/searchHighlight/dataTables.searchHighlight.css +++ b/features/searchHighlight/dataTables.searchHighlight.css @@ -2,5 +2,10 @@ table.dataTable span.highlight { background-color: #FFFF88; + border-radius: 0.28571429rem; } +table.dataTable span.column_highlight { + background-color: #ffcc99; + border-radius: 0.28571429rem; +} diff --git a/features/searchHighlight/dataTables.searchHighlight.js b/features/searchHighlight/dataTables.searchHighlight.js index 538f63f..d814f23 100644 --- a/features/searchHighlight/dataTables.searchHighlight.js +++ b/features/searchHighlight/dataTables.searchHighlight.js @@ -10,7 +10,7 @@ * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact * @copyright Copyright 2014 SpryMedia Ltd. - * + * * License MIT - http://datatables.net/license/mit * * This feature plug-in for DataTables will highlight search terms in the @@ -43,10 +43,16 @@ function highlight( body, table ) // Don't highlight the "not found" row, so we get the rows using the api if ( table.rows( { filter: 'applied' } ).data().length ) { + table.columns().every( function () { + var column = this; + column.nodes().flatten().to$().unhighlight({ className: 'column_highlight' }); + column.nodes().flatten().to$().highlight( $.trim( column.search() ).split(/\s+/), { className: 'column_highlight' } ); + } ); body.highlight( $.trim( table.search() ).split(/\s+/) ); } } + // Listen for DataTables initialisations $(document).on( 'init.dt.dth', function (e, settings, json) { if ( e.namespace !== 'dt' ) {