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;