allow component export

README.md

@@ -265,8 +265,18 @@ This is based on the configuration `lftiprB`, also see: https://datatables.net/r
 
 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.
+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 natives.
 
-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.
+Though, if you really insists on using these client-side controls, simply override the default `opts.dom` and `opts.buttons` with your own settings.
+
+## getServerParams method
+This function return the parameters last used by our server-side endpoint.  It allow you to use for server-side export API call.  Example:
+```javascript
+const parms = this.$refs.table.getServerParams()
+parms.export = 'csv'
+// boom export
+const url = 'export.php?' + $.param(data)
+window.open(url)
+```
 
 # MIT

example/App.vue

@@ -3,9 +3,15 @@
     <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>
+          <button
+            class="btn btn-secondary buttons-copy buttons-html5"
+            @click.stop.prevent="doExport('csv')">Csv</button>
+          <button
+            class="btn btn-secondary buttons-copy buttons-html5"
+            @click.stop.prevent="doExport('excel')">Excel</button>
+          <button
+            class="btn btn-secondary buttons-copy buttons-html5"
+            @click.stop.prevent="doExport('pdf')">Pdf</button>
         </div>
       </div>
       <div class="col-sm-12 col-md-3">
@@ -143,6 +149,11 @@ export default {
     },
     doSearch() {
       this.$refs.table.search(this.quickSearch)
+    },
+    doExport(type) {
+      const parms = this.$refs.table.getServerParams()
+      parms.export = type
+      window.alert('GET /api/v1/export?' + jQuery.param(parms))
     }
   }
 }

lib/mix-manifest.json

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

package.json

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

src/VdtnetTable.vue

@@ -88,8 +88,9 @@ export default {
         language: {
           infoFiltered: ''
         },
-        lengthMenu: [ [10, 100, 500, 1000, -1], [10, 100, 500, 1000, 'All'] ],
+        lengthMenu: [ [15, 100, 500, 1000, -1], [15, 100, 500, 1000, 'All'] ],
         responsive: true,
+        pageLength: 15,
         buttons: []  // remove any button defaults
       },
       dataTable: null
@@ -320,6 +321,9 @@ export default {
       const vm = this
       vm.dataTable.page.len( value )
       return vm.reload()
+    },
+    getServerParams() {
+      return this.dataTable.ajax.params()
     }
   }
 }