Merge 4835ea4a90 into 8a5d3c0477
Nick
8 years ago
committed by
GitHub
commit
a0b59f5ac9
@ -0,0 +1,142 @@
|
|||||||
|
/**
|
||||||
|
* @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 1
|
||||||
|
* @example
|
||||||
|
* zero configuration - displays a select in the footer of each column
|
||||||
|
* var table = $('#table_id').DataTable();
|
||||||
|
* $.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) {
|
||||||
|
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) {
|
||||||
|
if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) {
|
||||||
|
var column = dt.column(i);
|
||||||
|
appendSelectTo($(this), column);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
dt.columns().every( function (i) {
|
||||||
|
if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) {
|
||||||
|
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) {
|
||||||
|
if (opts.cols.length === 0 || 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 (i) {
|
||||||
|
if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) {
|
||||||
|
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,
|
||||||
|
rowId: null,
|
||||||
|
cols: []
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.dataTable.ColumnSearch = ColumnSearch;
|
||||||
|
$.fn.DataTable.ColumnSearch = ColumnSearch;
|
||||||
|
}(jQuery));
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
/**
|
||||||
|
* @summary SlidingChild
|
||||||
|
* @description Show/Hide row child data plug-in
|
||||||
|
* @version 1.0.0
|
||||||
|
* @file datatables-slidingchild.js
|
||||||
|
* @author datahandler (www.datahandler.uk)
|
||||||
|
* @copyright Copyright 2014 SpryMedia Ltd.
|
||||||
|
*
|
||||||
|
* License MIT - http://datatables.net/license/mit
|
||||||
|
*/
|
||||||
|
(function ($) {
|
||||||
|
var SlidingChild = function (dt, options) {
|
||||||
|
var opts = $.extend({}, SlidingChild.defaults, options);
|
||||||
|
|
||||||
|
// bind to selector click
|
||||||
|
$(opts.selector).on('click', function () {
|
||||||
|
var $this = $(this);
|
||||||
|
var dtRow = $this.is('tr') ? $this : $this.closest('tr');
|
||||||
|
|
||||||
|
if (!dtRow.is('tr')) { return; } // throw error?
|
||||||
|
// check row belongs to this table?
|
||||||
|
|
||||||
|
dtRow = dt.row(dtRow);
|
||||||
|
toggleChild(dtRow);
|
||||||
|
});
|
||||||
|
|
||||||
|
var toggleChild = function (dtRow) {
|
||||||
|
// if child already showing, close it.
|
||||||
|
if (dtRow.child.isShown()) {
|
||||||
|
closeChild(dtRow);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// closes existing showing child, if any
|
||||||
|
if (opts.toggleChild) closeChild(dt.row('.shown'));
|
||||||
|
|
||||||
|
showChildData(dtRow);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// code borrowed from the resource at: https://datatables.net/blog/2014-10-02
|
||||||
|
var closeChild = function (dtRow) {
|
||||||
|
if (dtRow) {
|
||||||
|
var showingRow = $(dtRow.node());
|
||||||
|
$(opts.sliderSelector, dtRow.child()).slideUp(function () {
|
||||||
|
dtRow.child.remove();
|
||||||
|
showingRow.removeClass('shown');
|
||||||
|
$(dt.table().node()).trigger('rowClosed', [dtRow]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var showChildData = function (dtRow) {
|
||||||
|
if (opts.useRowData) {
|
||||||
|
showChildDataFromRow(dtRow);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$.ajax({
|
||||||
|
type: opts.ajax.requestType,
|
||||||
|
url: opts.ajax.requestUrl,
|
||||||
|
beforeSend: function(xhr, settings) {
|
||||||
|
if (opts.ajax.getRequestData) {
|
||||||
|
this.data = opts.ajax.getRequestData(dtRow);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
contentType: opts.ajax.contentType,
|
||||||
|
dataType: opts.ajax.dataType,
|
||||||
|
success: function (response) {
|
||||||
|
var data = response;
|
||||||
|
if (opts.dataCallback) {
|
||||||
|
data = opts.dataCallback(response);
|
||||||
|
}
|
||||||
|
showChild(dtRow, data);
|
||||||
|
},
|
||||||
|
error: function (response) { showChild(dtRow, response); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var showChildDataFromRow = function(dtRow) {
|
||||||
|
if (!opts.dataCallback) { return; } // throw error?
|
||||||
|
var data = opts.dataCallback(dtRow.data());
|
||||||
|
showChild(dtRow, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
var showChild = function(dtRow, data) {
|
||||||
|
var selectedRow = $(dtRow.node());
|
||||||
|
dtRow.child(data).show();
|
||||||
|
|
||||||
|
$(opts.sliderSelector, dtRow.child()).slideDown(function () {
|
||||||
|
selectedRow.addClass('shown');
|
||||||
|
|
||||||
|
$(dt.table().node()).trigger('rowShown', [dtRow]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
SlidingChild.defaults = {
|
||||||
|
selector: "tr",
|
||||||
|
toggleChild: false,
|
||||||
|
useRowData: false,
|
||||||
|
ajax: {
|
||||||
|
requestType: "GET",
|
||||||
|
requestData: null,
|
||||||
|
requestUrl: null,
|
||||||
|
contentType: "application/json; charset=utf-8",
|
||||||
|
dataType: "json"
|
||||||
|
},
|
||||||
|
dataCallback: null,
|
||||||
|
sliderSelector: 'div.slider'
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.dataTable.SlidingChild = SlidingChild;
|
||||||
|
$.fn.DataTable.SlidingChild = SlidingChild;
|
||||||
|
}(jQuery));
|
||||||
Loading…
Reference in new issue