From e48ad732385f5c08f763ce1dc6480123b1ffd039 Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Mon, 20 Jan 2020 15:00:10 +0100
Subject: [PATCH] Search in column 1 AND column 2 and sum up
See issue #3
---
packages/data-table-view/package.json | 2 +-
.../src/vpu-data-table-view-demo.js | 13 ++--
.../src/vpu-data-table-view.js | 59 +++++++++++--------
3 files changed, 43 insertions(+), 31 deletions(-)
diff --git a/packages/data-table-view/package.json b/packages/data-table-view/package.json
index 50068131..021a26f6 100644
--- a/packages/data-table-view/package.json
+++ b/packages/data-table-view/package.json
@@ -30,7 +30,7 @@
"@webcomponents/webcomponentsjs": "^2.2.10",
"keycloak-js": "^8.0.0",
"event-target-shim": "^5.0.1",
- "datatables.net-dt": "^1.10.19",
+ "datatables.net-dt": "^1.10.20",
"datatables.net-responsive": "^2.2.3",
"datatables.net-responsive-dt": "^2.2.3",
"datatables.net-buttons": "^1.6.1",
diff --git a/packages/data-table-view/src/vpu-data-table-view-demo.js b/packages/data-table-view/src/vpu-data-table-view-demo.js
index 8cba2896..6a9aa78e 100644
--- a/packages/data-table-view/src/vpu-data-table-view-demo.js
+++ b/packages/data-table-view/src/vpu-data-table-view-demo.js
@@ -42,7 +42,7 @@ class DataTableViewDemo extends LitElement {
vdtv1.set_columns([{title:'Bezeichnung'}, {title:'Nummer'}, {title:'Datum'}, null, null])
.set_columnDefs(vdtv1_columnDefs)
.set_datatable(tbl)
- .on('draw', this.vdtv_preDraw.bind(this));
+ .on('draw', this.vdtv_draw.bind(this));
}
/*
@@ -87,12 +87,11 @@ class DataTableViewDemo extends LitElement {
];
}
- vdtv_preDraw() {
+ vdtv_draw() {
const vdtv1 = this.shadowRoot.querySelector('#vdtv1');
const value = vdtv1.columnReduce(1, function (a, b) {
- return a + b;
+ return a * 1 + b * 1;
});
- console.log('preDraw sum=' + value);
this.shadowRoot.querySelector('#id-sum').value = value;
}
@@ -173,15 +172,15 @@ class DataTableViewDemo extends LitElement {
<div class="content">
<h4>DataTable: with data, paging and searching AND exportable</h4>
<div class="box">
- <label for="id-sum">Sum of Number</label>
+ <label for="id-sum">Sum of column <b>Number</b> is</label>
<input type="text" readonly value="" name="sum" id="id-sum">
<vpu-data-table-view paging searching exportable export-name="Demo Export" column-searching
lang="${this.lang}" id="vdtv1"></vpu-data-table-view>
</div>
<h4>DataTable: no data, no paging, no searching</h4>
<div class="box">
- <button class="button is-small" @click="${this.vdtv2_add_rows}">noch etwas...</button>
- <vpu-data-table-view lang="${this.lang}" id="vdtv2">></vpu-data-table-view>
+ <button class="button is-small" @click="${this.vdtv2_add_rows}">add something...</button>
+ <vpu-data-table-view lang="${this.lang}" id="vdtv2"></vpu-data-table-view>
</div>
</div>
<div class="content">
diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js
index d1a82b4c..23a426f6 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -98,6 +98,31 @@ class DataTableView extends LitElement {
return this;
}
+ if (this.columnSearching) {
+ const existing_tfoot = this.shadowRoot.querySelector('table tfoot');
+ if (existing_tfoot === null || !existing_tfoot.hasChildNodes()) {
+ const fragment = document.createDocumentFragment();
+ const tfoot = document.createElement('tfoot');
+ const tr = document.createElement('tr');
+ this.columns.forEach(function (element, index) {
+ const th = document.createElement('td');
+ if (element !== null
+ && (typeof element.visible === 'undefined' || element.visible !== false)
+ && (typeof element.searchable === 'undefined' || element.searchable !== false)) {
+ const input = document.createElement('input');
+ input.type = 'text';
+ input.id = 'input-col-' + index;
+ input.placeholder = 'Search in ' + element.title;
+ th.appendChild(input);
+ }
+ tr.appendChild(th);
+ });
+ tfoot.appendChild(tr);
+ fragment.appendChild(tfoot);
+ this.shadowRoot.querySelector('table').appendChild(fragment);
+ }
+ }
+
this.table = $(this.shadowRoot.querySelector('table')).DataTable({
destroy: true,
autoWidth: true,
@@ -157,37 +182,25 @@ class DataTableView extends LitElement {
});
if (this.columnSearching) {
- const existing_tfoot = this.shadowRoot.querySelector('table tfoot');
- if (existing_tfoot === null || !existing_tfoot.hasChildNodes()) {
const thisTable = this.table;
- const fragment = document.createDocumentFragment();
- const tfoot = document.createElement('tfoot');
- const tr = document.createElement('tr');
const that = this;
this.columns.forEach(function (element, index) {
- const th = document.createElement('th');
if (element !== null
&& (typeof element.visible === 'undefined' || element.visible !== false)
&& (typeof element.searchable === 'undefined' || element.searchable !== false)) {
- const inp = document.createElement('input');
- inp.type = 'text';
- inp.placeholder = 'Search ' + element.title;
- inp.addEventListener('keyup', function () {
- thisTable.column(index).search(inp.value).draw();
-// console.log('on keyup: '+index+','+inp.value+' sum = '+that.columnReduce(index, function(a,b){return a+b;}));
-
- });
- th.appendChild(inp);
- console.log('inp for ' + element.title);
+ const input = that.shadowRoot.querySelector('#input-col-' + index);
+ if (input) {
+ ['keyup', 'change', 'clear'].forEach(function (event) {
+ input.addEventListener(event, function () {
+ const column = thisTable.column(index);
+ if (column.search() !== input.value) {
+ column.search(input.value).draw();
+ }
+ });
+ });
+ }
}
- tr.appendChild(th);
- //fragment.appendChild(th);
});
- tfoot.appendChild(tr);
- fragment.appendChild(tfoot);
- //this.shadowRoot.querySelector('tfoot').appendChild(fragment);
- this.shadowRoot.querySelector('table').appendChild(fragment);
- }
}
return this;
}
--
GitLab