From 41e412310bd0e1a2e882321930c3a5bc2759124c Mon Sep 17 00:00:00 2001 From: Nick Date: Thu, 12 Jan 2017 18:33:08 +0000 Subject: [PATCH 1/5] Create datatables-slidingchild.js --- .../js/datatables-slidingchild.js | 109 ++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 features/slidingChild/js/datatables-slidingchild.js diff --git a/features/slidingChild/js/datatables-slidingchild.js b/features/slidingChild/js/datatables-slidingchild.js new file mode 100644 index 0000000..cad0464 --- /dev/null +++ b/features/slidingChild/js/datatables-slidingchild.js @@ -0,0 +1,109 @@ +/** + * @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, + data: opts.ajax.requestData, + 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)); From 8d5455cc1887a0372b8ea6bd22591f3456c44899 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 14 Jan 2017 09:58:03 +0000 Subject: [PATCH 2/5] Update datatables-slidingchild.js Added ajax beforeSend to allow caller to specify data for request. --- features/slidingChild/js/datatables-slidingchild.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/features/slidingChild/js/datatables-slidingchild.js b/features/slidingChild/js/datatables-slidingchild.js index cad0464..1d1c522 100644 --- a/features/slidingChild/js/datatables-slidingchild.js +++ b/features/slidingChild/js/datatables-slidingchild.js @@ -55,8 +55,12 @@ else { $.ajax({ type: opts.ajax.requestType, - url: opts.ajax.requestUrl, - data: opts.ajax.requestData, + 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) { From 81de71d4648cc2908fc59a8d519dbf5c146a2190 Mon Sep 17 00:00:00 2001 From: Nick Date: Sun, 21 May 2017 13:47:14 +0100 Subject: [PATCH 3/5] Create columnsearch --- features/columnsearch | 102 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 features/columnsearch 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)); From 8dcf6df72fb204177c458d2ef7c762ca407b1843 Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 22 May 2017 18:59:01 +0100 Subject: [PATCH 4/5] Update columnsearch Added option for specifying which columns to display the search input or select Added additional examples --- features/columnsearch | 86 +++++++++++++++++++++++++++++++------------ 1 file changed, 63 insertions(+), 23 deletions(-) diff --git a/features/columnsearch b/features/columnsearch index 1fd2fc7..5560313 100644 --- a/features/columnsearch +++ b/features/columnsearch @@ -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; From 4835ea4a90b2fb07830419c4cef8f3b19cb28430 Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 22 May 2017 19:02:01 +0100 Subject: [PATCH 5/5] Update columnsearch --- features/columnsearch | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/features/columnsearch b/features/columnsearch index 5560313..fdc6362 100644 --- a/features/columnsearch +++ b/features/columnsearch @@ -59,7 +59,7 @@ function initSelectSearch() { if (opts.rowId !== null) { $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { - if (opts.cols.indexOf(i) !== -1) { + if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) { var column = dt.column(i); appendSelectTo($(this), column); } @@ -67,7 +67,7 @@ } else { dt.columns().every( function (i) { - if (opts.cols.indexOf(i) !== -1) { + if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) { var column = this; appendSelectTo($(column.footer()).empty(), column); } @@ -96,7 +96,7 @@ function initTextSearch() { if (opts.rowId !== null) { $('tr#' + opts.rowId + ' th', dt.table().node()).each(function(i) { - if (opts.cols.indexOf(i) !== -1) { + if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) { var column = dt.column(i); var header = $(column.header()); var headerText = header.text(); @@ -106,7 +106,7 @@ } else { dt.columns().every( function (i) { - if (opts.cols.indexOf(i) !== -1) { + if (opts.cols.length === 0 || opts.cols.indexOf(i) !== -1) { var column = this; var footer = $(column.footer()); var footerText = footer.text();