diff --git a/features/searchFade/dataTables.searchFade.css b/features/searchFade/dataTables.searchFade.css new file mode 100644 index 0000000..1e6ed13 --- /dev/null +++ b/features/searchFade/dataTables.searchFade.css @@ -0,0 +1,3 @@ +.notMatched td { + opacity: 0.2; +} diff --git a/features/searchFade/dataTables.searchFade.js b/features/searchFade/dataTables.searchFade.js new file mode 100644 index 0000000..16251da --- /dev/null +++ b/features/searchFade/dataTables.searchFade.js @@ -0,0 +1,113 @@ +/*! SearchFade 0.0.1 + * 2018 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary SearchFade + * @description Search and Fade unmatching rows in a DataTables + * @version 0.0.1 + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @copyright Copyright 2018 SpryMedia Ltd. + * + * 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 + */ +(function(factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery', 'datatables.net'], function($) { + return factory($, window, document); + }); + } else if (typeof exports === 'object') { + // CommonJS + module.exports = function(root, $) { + if (!root) { + root = window; + } + + if (!$ || !$.fn.dataTable) { + $ = require('datatables.net')(root, $).$; + } + + return factory($, root, root.document); + }; + } else { + // Browser + factory(jQuery, window, document); + } +})(function($, window, document, undefined) { + 'use strict'; + + $.fn.dataTable.Api.register('searchFade()', function() { + return this; + }); + + $.fn.dataTable.Api.register('searchFade().node()', function() { + return this.settings()[0].searchFadeNode; + }); + + function _draw(table, searchFade) { + searchFade.empty(); + searchFade.append('Search: '); + + $('').appendTo(searchFade); + } + + $.fn.dataTable.SearchFade = function(settings) { + var table = new $.fn.dataTable.Api(settings); + var searchFade = $('
'); + + table.settings()[0].searchFadeNode = searchFade; + + _draw(table, searchFade); + + // Trigger a search + searchFade.on('keyup redraw', 'input', function() { + table.rows(':visible').every(function(rowIdx, tableLoop, rowLoop) { + var present = true; + if ($('.searchFadeInput' + table.settings()[0].sTableId).val().length) { + present = table + .row(rowIdx) + .data() + .some(function(v) { + return v.match(new RegExp($('.searchFadeInput' + table.settings()[0].sTableId).val(), 'i')) != null; + }); + } + $(table.row(rowIdx).node()).toggleClass('notMatched', !present); + }); + }); + + table.on('draw', function() { + $('.searchFadeInput').trigger('redraw'); + }); + + // API method to get the searchFade container node + this.node = function() { + return searchFade; + }; + }; + + $.fn.DataTable.SearchFade = $.fn.dataTable.SearchFade; + + $.fn.dataTable.ext.feature.push({ + fnInit: function(settings) { + var search = new $.fn.dataTable.SearchFade(settings); + return search.node(); + }, + cFeature: 'F' + }); + + $(document).on('init.dt', function(e, settings, json) { + if (e.namespace === 'dt') { + $.fn.dataTable.SearchFade(settings); + } + + return; + }); +});