update dom template

README.md

@@ -252,4 +252,21 @@ Let say you have a column `description`, you can provide table head template for
 </template>
 ```
 
+## dom (Searching and Toolbar)
+`dom` configuration defines how jQuery DataTables components are rendered - https://datatables.net/reference/option/dom
+
+Our default configuration compatible with Bootstrap4 is:
+```html
+"<'row'<'col-sm-12'tr>>" +
+"<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>"
+```
+
+This is based on the configuration `lftiprB`, also see: https://datatables.net/reference/option/dom
+
+Note, we do not include toolbar buttons (B) or search control (s).  This is because we defer these functions to you (the User).  Toolbar Buttons are client-side; and since we do not use client-side, we don't need these buttons.  We expose a `search` method on `vdtnet-table` so you can use this method to perform search.
+
+Simply create your own Buttons for server-side exports, bulk, and/or other things.  Create your own search control and use the `search` method.  See example App.  All these things are now Vue Native.
+
+Though, if you want to use these client-side controls, you can freely override the default `opts.dom` and `opts.buttons` to show these controls.
+
 # MIT

example/App.vue

@@ -1,5 +1,37 @@
 <template>
   <div id="app">
+    <div class="row">
+      <div class="col-sm-12 col-md-9">
+        <div class="dt-buttons btn-group">
+          <button class="btn btn-secondary buttons-copy buttons-html5">button1</button>
+          <button class="btn btn-secondary buttons-copy buttons-html5">button2</button>
+          <button class="btn btn-secondary buttons-copy buttons-html5">button3</button>
+        </div>
+      </div>
+      <div class="col-sm-12 col-md-3">
+        <form
+          class="form-inline d-flex mx-1 justify-content-end"
+          @submit.stop.prevent="doSearch"
+        >
+          <div class="input-group">
+            <input
+              v-model="quickSearch"
+              type="search"
+              placeholder="Quick search"
+              class="form-control"
+            >
+            <div class="input-group-append">
+              <button
+                type="submit"
+                class="btn btn-outline-secondary"
+              >
+                <i class="mdi mdi-magnify"/> Go
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
     <vdtnet-table
       ref="table"
       :fields="fields"
@@ -62,8 +94,7 @@ export default {
         lengthChange: true,
         serverSide: true,
         fixedHeader: true,
-        saveState: true,
-        buttons: ['copy', 'csv', 'print']
+        saveState: true
       },
       fields: {
         id: { label: 'ID', sortable: true },
@@ -86,7 +117,8 @@ export default {
             return `https://${ data }`
           }
         }
-      }
+      },
+      quickSearch: ''
     }
   },
   methods: {
@@ -108,6 +140,9 @@ export default {
     },
     doAfterReload(data, table) {
       window.alert('data reloaded')
+    },
+    doSearch() {
+      this.$refs.table.search(this.quickSearch)
     }
   }
 }

lib/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=e8c11813292fcf00847b",
-    "/index.js.map": "/index.js.map?id=fe23b144244234db8c29"
+    "/index.js": "/index.js?id=4fefe56af56c9ec3399a",
+    "/index.js.map": "/index.js.map?id=7ebc3389f1cdc2b39e2b"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/index.js",

src/VdtnetTable.vue

@@ -81,9 +81,8 @@ export default {
     return {
       options: {
 /*eslint-disable */
-        dom: "<'row'<'col-sm-12 col-md-9'<'dataTables_toolbar'><'dataTables_buttons'B>l><'col-sm-12 col-md-3'f>>" +
-          "<'row'<'col-sm-12'tr>>" +
-          "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
+        dom: "<'row'<'col-sm-12'tr>>" +
+          "<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>",
 /*eslint-enable */
         columns: [],
         language: {
@@ -246,6 +245,9 @@ export default {
         }
       }
     })
+
+    // mount component into dataTable_toolbar
+
   },
   beforeDestroy() {
     const vm = this
@@ -308,6 +310,16 @@ export default {
 
       vm.dataTable.ajax.reload( callback, resetPaging )
       return vm
+    },
+    search(value) {
+      const vm = this
+      vm.dataTable.search( value ).draw()
+      return vm
+    },
+    setPageLength(value) {
+      const vm = this
+      vm.dataTable.page.len( value )
+      return vm.reload()
     }
   }
 }
@@ -316,8 +328,11 @@ export default {
 .select-checkbox, .select-all-checkbox {
   cursor: pointer;
 }
-.dataTables_toolbar, .dataTables_buttons, .dataTables_length {
-  float: left;
+.vdtnet-footer .dataTables_length {
+  padding-top: 6px;
   padding-right: 10px;
 }
+.vdtnet-footer .dataTables_length, .vdtnet-footer .dataTables_paginate {
+  float: right;
+}
 </style>