Update columnsearch

Added option for specifying which columns to display the search input or select
Added additional examples
pull/334/head
Nick 8 years ago committed by GitHub
parent 81de71d464
commit 8dcf6df72f

@ -10,13 +10,43 @@
*/ */
/** /**
* Example usage * Example usage 1
* @example * @example
* zero configuration - displays a select in the footer of each column
* var table = $('#table_id').DataTable(); * var table = $('#table_id').DataTable();
* columnSearch = * $.fn.dataTable.ColumnSearch(table);
* new $.fn.dataTable.ColumnSearch(table, { */
* searchElementType: 'select', /**
* rowId: 'rowSearch' * Example usage 2
* @example
* select search targetting specific columns
* var table = $('#table_id').DataTable();
* $.fn.dataTable.ColumnSearch(table, {
* selectAllText: 'Any',
* cols: [0,3,5]
* });
*/
/**
* Example usage 3
* @example
* text search with headings as placeholder
* var table = $('#table_id').DataTable();
* $.fn.dataTable.ColumnSearch(table, {
* searchElementType: 'text',
* displayHeadingAsPlaceholder: true
* });
*/
/**
* Example usage 4
* @example
* text search targetting the header or
* footer row specified by rowId, and
* targetting specific columns
* var table = $('#table_id').DataTable();
* $.fn.dataTable.ColumnSearch(table, {
* searchElementType: 'Any',
* rowId: 'rowSearch',
* cols: [0,3,5]
* }); * });
*/ */
(function ($) { (function ($) {
@ -27,16 +57,20 @@
else initTextSearch(); else initTextSearch();
function initSelectSearch() { function initSelectSearch() {
if (opts.rowId != null) { if (opts.rowId !== null) {
$('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) {
if (opts.cols.indexOf(i) !== -1) {
var column = dt.column(i); var column = dt.column(i);
appendSelectTo($(this), column); appendSelectTo($(this), column);
}
}); });
} }
else { else {
dt.columns().every( function () { dt.columns().every( function (i) {
if (opts.cols.indexOf(i) !== -1) {
var column = this; var column = this;
appendSelectTo($(column.footer()).empty(), column); appendSelectTo($(column.footer()).empty(), column);
}
} ); } );
} }
} }
@ -60,20 +94,24 @@
} }
function initTextSearch() { function initTextSearch() {
if (opts.rowId != null) { if (opts.rowId !== null) {
$('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) {
if (opts.cols.indexOf(i) !== -1) {
var column = dt.column(i); var column = dt.column(i);
var header = $(column.header()); var header = $(column.header());
var headerText = header.text(); var headerText = header.text();
appendTextInputTo($(this), column, opts.displayHeadingAsPlaceholder ? headerText : ''); appendTextInputTo($(this), column, opts.displayHeadingAsPlaceholder ? headerText : '');
}
}); });
} }
else { else {
dt.columns().every( function () { dt.columns().every( function (i) {
if (opts.cols.indexOf(i) !== -1) {
var column = this; var column = this;
var footer = $(column.footer()); var footer = $(column.footer());
var footerText = footer.text(); var footerText = footer.text();
appendTextInputTo(footer.empty(), column, opts.displayHeadingAsPlaceholder ? footerText : ''); appendTextInputTo(footer.empty(), column, opts.displayHeadingAsPlaceholder ? footerText : '');
}
} ); } );
} }
} }
@ -94,7 +132,9 @@
ColumnSearch.defaults = { ColumnSearch.defaults = {
searchElementType: 'select', searchElementType: 'select',
selectAllText: 'All', selectAllText: 'All',
displayHeadingAsPlaceholder: false displayHeadingAsPlaceholder: false,
rowId: null,
cols: []
}; };
$.fn.dataTable.ColumnSearch = ColumnSearch; $.fn.dataTable.ColumnSearch = ColumnSearch;

Loading…
Cancel
Save