|
|
|
@ -10,14 +10,44 @@
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Example usage
|
|
|
|
|
* Example usage 1
|
|
|
|
|
* @example
|
|
|
|
|
* zero configuration - displays a select in the footer of each column
|
|
|
|
|
* var table = $('#table_id').DataTable();
|
|
|
|
|
* columnSearch =
|
|
|
|
|
* new $.fn.dataTable.ColumnSearch(table, {
|
|
|
|
|
* searchElementType: 'select',
|
|
|
|
|
* rowId: 'rowSearch'
|
|
|
|
|
* });
|
|
|
|
|
* $.fn.dataTable.ColumnSearch(table);
|
|
|
|
|
*/
|
|
|
|
|
/**
|
|
|
|
|
* 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 ($) {
|
|
|
|
|
var ColumnSearch = function (dt, options) {
|
|
|
|
@ -27,16 +57,20 @@
|
|
|
|
|
else initTextSearch();
|
|
|
|
|
|
|
|
|
|
function initSelectSearch() {
|
|
|
|
|
if (opts.rowId != null) {
|
|
|
|
|
if (opts.rowId !== null) {
|
|
|
|
|
$('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) {
|
|
|
|
|
var column = dt.column(i);
|
|
|
|
|
appendSelectTo($(this), column);
|
|
|
|
|
if (opts.cols.indexOf(i) !== -1) {
|
|
|
|
|
var column = dt.column(i);
|
|
|
|
|
appendSelectTo($(this), column);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
dt.columns().every( function () {
|
|
|
|
|
var column = this;
|
|
|
|
|
appendSelectTo($(column.footer()).empty(), column);
|
|
|
|
|
dt.columns().every( function (i) {
|
|
|
|
|
if (opts.cols.indexOf(i) !== -1) {
|
|
|
|
|
var column = this;
|
|
|
|
|
appendSelectTo($(column.footer()).empty(), column);
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -60,20 +94,24 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initTextSearch() {
|
|
|
|
|
if (opts.rowId != null) {
|
|
|
|
|
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 : '');
|
|
|
|
|
if (opts.cols.indexOf(i) !== -1) {
|
|
|
|
|
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 : '');
|
|
|
|
|
dt.columns().every( function (i) {
|
|
|
|
|
if (opts.cols.indexOf(i) !== -1) {
|
|
|
|
|
var column = this;
|
|
|
|
|
var footer = $(column.footer());
|
|
|
|
|
var footerText = footer.text();
|
|
|
|
|
appendTextInputTo(footer.empty(), column, opts.displayHeadingAsPlaceholder ? footerText : '');
|
|
|
|
|
}
|
|
|
|
|
} );
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -94,7 +132,9 @@
|
|
|
|
|
ColumnSearch.defaults = {
|
|
|
|
|
searchElementType: 'select',
|
|
|
|
|
selectAllText: 'All',
|
|
|
|
|
displayHeadingAsPlaceholder: false
|
|
|
|
|
displayHeadingAsPlaceholder: false,
|
|
|
|
|
rowId: null,
|
|
|
|
|
cols: []
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$.fn.dataTable.ColumnSearch = ColumnSearch;
|
|
|
|
|