From 277e773d3dad610957a86d848002e24c22624ac4 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Wed, 22 Oct 2014 11:28:45 +0100 Subject: [PATCH] New feature plug-in: Search highlighting - see http://datatables.net/blog/2014-10-22 for details --- .../dataTables.alphabetSearch.js | 15 ++--- .../dataTables.searchHighlight.css | 6 ++ .../dataTables.searchHighlight.js | 65 +++++++++++++++++++ 3 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 features/searchHighlight/dataTables.searchHighlight.css create mode 100644 features/searchHighlight/dataTables.searchHighlight.js diff --git a/features/alphabetSearch/dataTables.alphabetSearch.js b/features/alphabetSearch/dataTables.alphabetSearch.js index 8959436..f9bfdc1 100644 --- a/features/alphabetSearch/dataTables.alphabetSearch.js +++ b/features/alphabetSearch/dataTables.alphabetSearch.js @@ -4,22 +4,17 @@ /** * @summary AlphabetSearch - * @description Show an alphabet aloneside a table providing search input options - * See http://datatables.net/blog/2014-09-22 for details + * @description Show an set of alphabet buttons alongside a table providing + * search input options * @version 1.0.0 * @file dataTables.alphabetSearch.js * @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 source file is free software, available under the following license: - * MIT license - http://datatables.net/license/mit - * - * This source file is distributed in the hope that it will be useful, but - * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY - * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. - * - * For details please refer to: http://www.datatables.net + * For more detailed information please see: + * http://datatables.net/blog/2014-09-22 */ (function(){ diff --git a/features/searchHighlight/dataTables.searchHighlight.css b/features/searchHighlight/dataTables.searchHighlight.css new file mode 100644 index 0000000..10a03e6 --- /dev/null +++ b/features/searchHighlight/dataTables.searchHighlight.css @@ -0,0 +1,6 @@ + + +table.dataTable span.highlight { + background-color: #FFFF88; +} + diff --git a/features/searchHighlight/dataTables.searchHighlight.js b/features/searchHighlight/dataTables.searchHighlight.js new file mode 100644 index 0000000..9d93f35 --- /dev/null +++ b/features/searchHighlight/dataTables.searchHighlight.js @@ -0,0 +1,65 @@ +/*! SearchHighlight for DataTables v1.0.0 + * 2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary SearchHighlight + * @description Search term highlighter for DataTables + * @version 1.0.0 + * @file dataTables.searchHighlight.js + * @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 + * DataTable as they are entered into the main search input element, or via the + * `search()` API method. + * + * It depends upon the jQuery Highlight plug-in by Bartek Szopka: + * http://bartaz.github.io/sandbox.js/jquery.highlight.js + * + * Search highlighting in DataTables can be enabled by: + * + * * Adding the class `searchHighlight` to the HTML table + * * Setting the `searchHighlight` parameter in the DataTables initialisation to + * be true + * * Setting the `searchHighlight` parameter to be true in the DataTables + * defaults (thus causing all tables to have this feature) - i.e. + * `$.fn.dataTable.defaults.searchHighlight = true`. + * + * For more detailed information please see: + * http://datatables.net/blog/2014-10-22 + */ + +(function(window, document, $){ + + +$(document).on( 'init.dt.dth', function (e, settings, json) { + var table = new $.fn.dataTable.Api( settings ); + var body = $( table.table().body() ); + + if ( + $( table.table().node() ).hasClass( 'searchHighlight' ) || // table has class + settings.oInit.searchHighlight || // option specified + $.fn.dataTable.defaults.searchHighlight // default set + ) { + table + .on( 'draw.dt.dth column-visibility.dt.dth', function () { + // On each draw highlight search results, removing the old ones + body.unhighlight(); + + // Don't highlight the "not found" row + if ( table.rows( { filter: 'applied' } ).data().length ) { + body.highlight( table.search() ); + } + } ) + .on( 'destroy', function () { + // Remove event handler + table.off( 'draw.dt.dth column-visibility.dt.dth' ); + } ); + } +} ); + + +})(window, document, jQuery);