Create columnsearch

8 years ago · 81de71d464
parent 8d5455cc18
commit 81de71d464
1 changed files with 102 additions and 0 deletions
--- a/features/columnsearch
+++ 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 = $('<select class="col-filter"><option value="">' + opts.selectAllText + '</option></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( '<option value="'+d+'">'+d+'</option>' )
+            } );
+        }
+
+        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 = $('<input type="text" placeholder="Search '+placeholder+'" />')
+            .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));