diff --git a/package.json b/package.json index 558f28fb56..b2074b9e85 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "bootstrap-touchspin": "~3.1.1", "c3": "~0.4.11", "d3": "~3.5.17", + "datatables": "^1.10.18", "datatables.net": "^1.10.15", "datatables.net-colreorder": "^1.4.1", "datatables.net-colreorder-bs": "~1.3.2", diff --git a/src/js/patternfly.dataTables.pfFilter.js b/src/js/patternfly.dataTables.pfFilter.js index aa1de55030..51d9779c1c 100644 --- a/src/js/patternfly.dataTables.pfFilter.js +++ b/src/js/patternfly.dataTables.pfFilter.js @@ -104,10 +104,10 @@ */ (function (factory) { "use strict"; - if (typeof define === "function" && define.amd ) { + if (typeof define === "function" && define.amd) { // AMD - define (["jquery", "datatables.net"], function ($) { - return factory ($, window, document); + define(["jquery", "datatables.net"], function ($) { + return factory($, window, document); }); } else if (typeof exports === "object") { // CommonJS @@ -208,10 +208,46 @@ } return showThisRow; }); + + $.event.trigger({ + type: "init.pf", + message: "pfFilter has been initialized", + time: new Date() + }); }; // Local functions + /** + * update filters if server-side processing is enabled + * see more https://www.datatables.net/release-datatables/examples/data_sources/server_side.html + * + * @param {DataTable.Api} dt DataTable + * @private + */ + function updateRemoteFilters (dt) { + var ctx = dt.settings()[0]; + var filters = []; + + $.each(ctx._pfFilter.filters, function (index, filter) { + if (filters[filter.column] === undefined) { + filters[filter.column] = []; + } + + filters[filter.column].push(filter.value); + }); + + dt.search('').columns().search(''); // clear before update + + $.each(filters, function (column, values) { + if (values === undefined) { + return; + } + + dt.column(column).search(values.join('|'), true, false, ctx._pfFilter.filterCaseInsensitive); + }); + } + /** * Add active filter control * @@ -227,7 +263,7 @@ var i; // Append active filter control - ctx._pfFilter.activeFilterControls.append('
  • ' + filter.name + ': ' + + ctx._pfFilter.activeFilterControls.append('
  • ' + filter.name + ': ' + filter.value + '
  • '); // Handle click to clear active filter @@ -243,6 +279,9 @@ if (ctx._pfFilter.filters.length === 0) { ctx._pfFilter.activeFilters.addClass("hidden"); // Hide } + if (ctx.oInit.serverSide) { + updateRemoteFilters(dt); + } dt.draw(); updateFilterResults(dt); }); @@ -274,6 +313,9 @@ // Add new filter if (!found) { ctx._pfFilter.filters.push(filter); + if (ctx.oInit.serverSide) { + updateRemoteFilters(dt); + } dt.draw(); addActiveFilterControl(dt, filter); updateFilterResults(dt); @@ -292,6 +334,9 @@ ctx._pfFilter.filters.length = 0; // Reset filters ctx._pfFilter.activeFilterControls.html(""); // Remove active filter controls ctx._pfFilter.activeFilters.addClass("hidden"); // Hide active filters area + if (ctx.oInit.serverSide) { + updateRemoteFilters(dt); + } dt.draw(); } @@ -377,7 +422,16 @@ */ function updateFilterResults (dt) { var ctx = dt.settings()[0]; - var filteredRows = dt.rows({"page": "current", "search": "applied"}).flatten().length; + var filteredRows; + + if (ctx.oInit.serverSide) { + dt.on('draw', function () { + filteredRows = dt.ajax.json().recordsFiltered; + ctx._pfFilter.filterResults.html(filteredRows + " Results"); + }); + } else { + filteredRows = dt.rows({ "page": "current", "search": "applied" }).flatten().length; + } if (ctx._pfFilter.filterResults === undefined || ctx._pfFilter.filterResults.length === 0) { return; } diff --git a/src/less/table-view.less b/src/less/table-view.less index 70b626efe1..bcce0e4ca2 100644 --- a/src/less/table-view.less +++ b/src/less/table-view.less @@ -149,7 +149,6 @@ table.dataTable { margin-bottom: 0; } } - } // Inline action button and kebab @@ -165,6 +164,10 @@ table.dataTable { height: 100%; width: 100%; } + .table-view-pf-save, + .table-view-pf-cancel { + width: 50%; + } .dropdown, .table-view-pf-btn { height: 100%; @@ -177,6 +180,15 @@ table.dataTable { } } +// Inline edit td +.table-view-pf-editable > .table-view-pf-editor { + width: 100%; + color: @color-pf-black; + .filter-option { + color: @color-pf-black; + } +} + // Selection column .table-view-pf-select { width: 33px; diff --git a/src/sass/converted/patternfly/_table-view.scss b/src/sass/converted/patternfly/_table-view.scss index 789abea5b3..d638da3352 100644 --- a/src/sass/converted/patternfly/_table-view.scss +++ b/src/sass/converted/patternfly/_table-view.scss @@ -149,7 +149,6 @@ table.dataTable { margin-bottom: 0; } } - } // Inline action button and kebab @@ -165,6 +164,10 @@ table.dataTable { height: 100%; width: 100%; } + .table-view-pf-save, + .table-view-pf-cancel { + width: 50%; + } .dropdown, .table-view-pf-btn { height: 100%; @@ -177,6 +180,15 @@ table.dataTable { } } +// Inline edit td +.table-view-pf-editable > .table-view-pf-editor { + width: 100%; + color: $color-pf-black; + .filter-option { + color: $color-pf-black; + } +} + // Selection column .table-view-pf-select { width: 33px; diff --git a/src/sass/converted/rcue/_table-view.scss b/src/sass/converted/rcue/_table-view.scss index 789abea5b3..d638da3352 100644 --- a/src/sass/converted/rcue/_table-view.scss +++ b/src/sass/converted/rcue/_table-view.scss @@ -149,7 +149,6 @@ table.dataTable { margin-bottom: 0; } } - } // Inline action button and kebab @@ -165,6 +164,10 @@ table.dataTable { height: 100%; width: 100%; } + .table-view-pf-save, + .table-view-pf-cancel { + width: 50%; + } .dropdown, .table-view-pf-btn { height: 100%; @@ -177,6 +180,15 @@ table.dataTable { } } +// Inline edit td +.table-view-pf-editable > .table-view-pf-editor { + width: 100%; + color: $color-pf-black; + .filter-option { + color: $color-pf-black; + } +} + // Selection column .table-view-pf-select { width: 33px;