datatable in table page

src/components/views/Tables.vue

@@ -15,21 +15,15 @@
               </div>
               <div class="row">
                 <div class="col-sm-12 table-responsive">
-                    <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
+                    <table id="example1" class="table table-bordered table-striped dataTable" cellspacing="0" width="100%">
                       <thead>
                         <tr role="row">
-                          <th aria-label="Date: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Date</th>
-                          <th aria-label="Description: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Description</th>
-                          <th aria-label="Amount: activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Amount</th>
+                          <th>Date</th>
+                          <th>Description</th>
+                          <th>Amount</th>
                         </tr>
                       </thead>
-                      <!-- <tbody v-if="transactions">
-                          <tr class="even" role="row" v-for="trans in transactions" :key="trans">
-                            <td class="sorting_1">{{trans.date}}</td>
-                            <td>{{trans.description}}</td>
-                            <td>{{trans.amount}}</td>
-                          </tr>
-                      </tbody> -->
+                      <tbody></tbody>
                     </table>
                 </div>
               </div>
@@ -51,17 +45,10 @@ require('datatables.net-bs')
 
 export default {
   name: 'Tables',
-  mounted() {
-    this.getData()
-    this.loadDatatable()
-    this.access_token = localStorage.getItem('token')
+  data: {
+    dataTable: null
   },
   methods: {
-    loadDatatable() {
-      this.$nextTick(() => {
-        $('#example1').DataTable()
-      })
-    },
     getData() {
       var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
       var thisObj = this
@@ -84,6 +71,35 @@ export default {
     toggleLoading() {
       this.loading = this.loading === '' ? 'loading' : ''
     }
+  },
+  mounted() {
+    let users = []
+    this.access_token = localStorage.getItem('token')
+    this.dataTable = $('#example1').DataTable({})
+    var params = {'client_id': config.clientId, 'client_secret': config.clientSecret, 'access_token': this.access_token}
+    var thisObj = this
+    api
+      .request('post', 'listTransactions', params)
+      .then(response => {
+        thisObj.toggleLoading()
+        var data = response.data
+        if (data.status === 'success') {
+          data.data.resources.forEach(item => {
+            users.push(item)
+          })
+          users.forEach(user => {
+            this.dataTable.row.add([
+              user.date,
+              user.description,
+              user.amount
+            ]).draw(false)
+          })
+        }
+      })
+      .catch(() => {
+        thisObj.$store.commit('TOGGLE_LOADING')
+        thisObj.response = 'Server appears to be offline'
+      })
   }
 }
 </script>

src/routes.js

@@ -11,6 +11,10 @@ const routes = [
     component: LoginView
   },
   {
+    path: '/login',
+    component: LoginView
+  },
+  {
     path: '/signup',
     component: SignupView
   },