updating package and examples

Author: syshex

examples/01-basic.html

@@ -25,17 +25,18 @@ <h1>Vue Bootstrap Table Demo</h1>
                         :show-filter="showFilter"
                         :show-column-picker="showPicker"
                         :paginated="paginated"
+                        :ajax="ajax"
                 >
                 </vue-bootstrap-table>
             </div>
             <h2>Events Received</h2>
             <div>
-                {{ logging | json}}
+                {{ logging }}
             </div>
         </div>
 
     </div>
-    <script src="vue.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
     <script src="../dist/vue-bootstrap-table.js"></script>
     <script src="01-basic.js"></script>
 </body>

examples/01-basic.js

@@ -1,5 +1,5 @@
-Vue.config.debug = true;
-Vue.config.devtools = true;
+//Vue.config.debug = true;
+//Vue.config.devtools = true;
 
 new Vue({
     el: '#app',
@@ -11,24 +11,33 @@ new Vue({
         showFilter: true,
         showPicker: true,
         paginated: true,
+        ajax: {
+            enabled: false,
+            url: "http://localhost:9430/data/test",
+            method: "POST",
+            delegate: true,
+        },
         columns: [
             {
                 title:"id",
                 visible: true,
                 editable: false,
             },
             {
-                title:"name",
+                title:"Name",
+                name: "name",
                 visible: true,
                 editable: true,
             },
             {
-                title:"age",
+                title:"Age",
+                name: "age",
                 visible: true,
                 editable: true,
             },
             {
-                title:"country",
+                title:"Country",
+                name: "country",
                 visible: true,
                 editable: true,
             }
@@ -54,7 +63,26 @@ new Vue({
             }
         ]
     },
-    ready: function () {
+    created: function () {
+        var self = this;
+        this.$on('cellDataModifiedEvent',
+            function( originalValue, newValue, columnTitle, entry) {
+                self.logging.push("cellDataModifiedEvent - Original Value : " + originalValue +
+                                         " | New Value : " + newValue +
+                                         " | Column : " + columnTitle +
+                                         " | Complete Entry : " +  entry );
+            }
+        );
+        this.$on('ajaxLoadedEvent',
+            function( data ) {
+                this.logging.push("ajaxLoadedEvent - data : " + data );
+            }
+        );
+        this.$on('ajaxLoadingError',
+            function( error ) {
+                this.logging.push("ajaxLoadingError - error : " + error );
+            }
+        );
     },
     methods: {
         addItem: function() {
@@ -77,12 +105,4 @@ new Vue({
             this.paginated = !this.paginated;
         }
     },
-    events: {
-        cellDataModifiedEvent: function( originalValue, newValue, columnTitle, entry) {
-            this.logging.push("Original Value : " + originalValue +
-                         " | New Value : " + newValue +
-                         " | Column : " + columnTitle +
-                         " | Complete Entry : " +  entry );
-        },
-    },
 });