update actions

Author: noogen

Diff for: README.md

@@ -88,7 +88,7 @@ export default {
 ## Documentation
 Since it's a wrapper, all/most features are provided by the [jQuery DataTable](https://datatables.net/manual/) library.
 
-More documentation for this library, to come.
+More documentations below.
 
 ## Additional Headers
 Since options are completely exposed, simply use the native method per [jQuery DataTable example](https://editor.datatables.net/manual/security#Prevention)
@@ -108,4 +108,16 @@ options: {
 
 If you haven't already figured it out, ajax is basically the signature of [jQuery.ajax](http://api.jquery.com/jquery.ajax/) which is demonstrated here wrapped as [jQuery DataTable ajax pipeline](https://datatables.net/examples/server_side/pipeline.html)
 
+## Row Action Buttons
+Use `data-action` attribute to automatically wire up any action button/elements.  To render action button/element in a row, simply define field like below (also, see example App):
+```javascript
+actions: {
+  label: 'Actions',
+  render: () => {
+    return '<a href="javascript:void(0);" data-action="edit" class="btn btn-primary btn-sm"><i class="mdi mdi-square-edit-outline"></i> Edit</a>' +
+    '<span data-action="delete" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete</span>'
+  }
+}
+```
+
 # MIT

Diff for: dist/build.js

@@ -1,6 +1,11 @@
 <template>
   <div id="app">
-    <vdtnet-table :fields="fields" :opts="options" />
+    <vdtnet-table
+      :fields="fields"
+      :opts="options"
+      @edit="alert('row edit button clicked')"
+      @delete="alert('row delete button clicked')"
+    />
   </div>
 </template>
 
@@ -60,9 +65,21 @@ export default {
           }
         },
         phone: { label: 'Phone' },
-        website: { label: 'Website' }
+        website: { label: 'Website' },
+        actions: {
+          label: 'Actions',
+          render: () => {
+            return '<a href="javascript:void(0);" data-action="edit" class="btn btn-primary btn-sm"><i class="mdi mdi-square-edit-outline"></i> Edit</a>' +
+            '<span data-action="delete" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete</span>'
+          }
+        }
       }
     }
+  },
+  methods: {
+    alert(msg) {
+      window.alert(msg)
+    }
   }
 }
 </script>

Diff for: dist/build.js.map

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTable.net wrapper component ",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/vue-datatables-net.min.js",
@@ -11,7 +11,7 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build:lib": "rm -rf ./lib && bili src/index.js",
-    "build:example": "rm -rf ./dist && cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "build:example": "rm -rf ./dist && cross-env NODE_ENV=demo webpack --progress --hide-modules",
     "lint": "eslint --ext .js,.vue src/",
     "lint-fix": "eslint --fix --ext .js,.vue src/",
     "check-outdated": "npm outdated"

Diff for: example/App.vue

@@ -47,6 +47,9 @@ export default {
     },
     fields: {
       type: Object
+    },
+    jquery: {
+      type: Object
     }
   },
   data() {
@@ -64,10 +67,11 @@ export default {
   },
   mounted() {
     const vm = this
+    const jq = vm.jquery || window.jQuery
 
     // allow user to override default options
     if (vm.opts) {
-      vm.options = window.jQuery.extend({}, vm.options, vm.opts)
+      vm.options = jq.extend({}, vm.options, vm.opts)
     }
 
     if (vm.url) {
@@ -112,20 +116,42 @@ export default {
       }
     }
 
-    const $el = window.jQuery(vm.$refs.table)
+    const $el = jq(vm.$refs.table)
     vm.dataTable = $el.DataTable(vm.options)
 
-    // wire up view, edit, and/or delete button
-    // var d = table.row( this ).data();
-    $el.on('click', 'tbody > tr [data-action]', (e) => {
+    // wire up edit, delete, and/or action buttons
+    $el.on('click', '[data-action]', (e) => {
       e.preventDefault()
       e.stopPropagation()
-      const $this  = $(this)
-      const action = $this.data('action')
+      const target = jq(e.target)
+      let that     = target
+      let action   = that.attr('data-action')
+      while(!action) {
+        // don't let it propagate outside of container
+        if (that.hasClass('vdtnet-container')) {
+          // no action, simply exit
+          return
+        }
+        that   = that.parent()
+        action = that.attr('data-action')
+      }
+
+      // only emit if there is action
       if (action) {
-        const row  = vm.dataTable.row($this.closest('tr'))
-        const data = row.data()
-        vm.$emit(action, {data, row, $this})
+        // detect if row action
+        let tr = that.closest('tr')
+        if (tr) {
+          if (tr.hasClass('child')) {
+            tr = tr.prev()
+          }
+          const row  = vm.dataTable.row(tr)
+          const data = row.data()
+          vm.$emit(action, {data, row, that})
+        } else {
+          // not a row click, must be other kind of action
+          // such as bulk, csv, pdf, etc...
+          vm.$emit(action, {target})
+        }
       }
     })
   }

Diff for: lib/vue-datatables-net.min.js

@@ -10,8 +10,7 @@ module.exports = {
   },
   externals: {
     jquery: 'jQuery',
-    vue: 'Vue',
-    vue: 'Vue'
+    Vue: 'Vue'
   },
   module: {
     rules: [