diff --git a/features/columnsearch b/features/columnsearch new file mode 100644 index 0000000..1fd2fc7 --- /dev/null +++ b/features/columnsearch @@ -0,0 +1,102 @@ +/** + * @summary ColumnSearch + * @description Feature to provide column searching by text input or select + * @version 1.0.0 + * @file columnsearch.js + * @author datahandler (www.datahandler.uk) + * @copyright Copyright datahandler (www.datahandler.uk) + * + * License MIT - http://datatables.net/license/mit + */ + +/** + * Example usage + * @example + * var table = $('#table_id').DataTable(); + * columnSearch = + * new $.fn.dataTable.ColumnSearch(table, { + * searchElementType: 'select', + * rowId: 'rowSearch' + * }); + */ +(function ($) { + var ColumnSearch = function (dt, options) { + var opts = $.extend({}, ColumnSearch.defaults, options); + + if (opts.searchElementType === 'select') initSelectSearch(); + else initTextSearch(); + + function initSelectSearch() { + if (opts.rowId != null) { + $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { + var column = dt.column(i); + appendSelectTo($(this), column); + }); + } + else { + dt.columns().every( function () { + var column = this; + appendSelectTo($(column.footer()).empty(), column); + } ); + } + } + + function appendSelectTo($elem, col) { + var select = $('') + .appendTo( $elem ) + .on( 'change', function () { + var val = $.fn.dataTable.util.escapeRegex( + $(this).val() + ); + + col + .search( val ? '^'+val+'$' : '', true, false ) + .draw(); + } ); + + col.data().unique().sort().each( function ( d, j ) { + select.append( '' ) + } ); + } + + function initTextSearch() { + if (opts.rowId != null) { + $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { + var column = dt.column(i); + var header = $(column.header()); + var headerText = header.text(); + appendTextInputTo($(this), column, opts.displayHeadingAsPlaceholder ? headerText : ''); + }); + } + else { + dt.columns().every( function () { + var column = this; + var footer = $(column.footer()); + var footerText = footer.text(); + appendTextInputTo(footer.empty(), column, opts.displayHeadingAsPlaceholder ? footerText : ''); + } ); + } + } + + function appendTextInputTo($elem, col, placeholder) { + var textInput = $('') + .appendTo( $elem ) + .on( 'keyup change', function () { + if ( col.search() !== this.value ) { + col + .search( this.value ) + .draw(); + } + } ); + } + }; + + ColumnSearch.defaults = { + searchElementType: 'select', + selectAllText: 'All', + displayHeadingAsPlaceholder: false + }; + + $.fn.dataTable.ColumnSearch = ColumnSearch; + $.fn.DataTable.ColumnSearch = ColumnSearch; +}(jQuery));