Search in column 1 AND column 2 and sum up

See issue #3

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",

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">

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;
     }