bseib/vue-datatables-example.html

## vue-datatables-example.html
<!DOCTYPE html>
<html>
<head>
  <title>Example Vue + DataTables</title>
  <!-- I happened to be using the bootstrap styling w/ DataTables. You may not need this. -->
  <link rel="stylesheet" href="/path/to/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
</head>
<body>
  <div id="example-page">

    <div v-show="isFirstDataLoaded" style="display:none">
      <table id="personsTable" class="table table-striped table-bordered table-responsive table-sm" cellspacing="0" width="100%">
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>zip</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>zip</th>
          </tr>
        </tfoot>
        <tbody>
          <tr v-for="p in persons" :id="'row-'+p.personId">
            <td v-text="p.personId"></td>
            <td v-text="p.name"></td>
            <td v-text="p.address"></td>
            <td v-text="p.zip"></td>
          </tr>
        </tbody>
      </table>
    </div>

  </div><!-- example-page -->

  <script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
  <script type="text/javascript" src="/path/to/vue-datatables-example.js"></script>

</body>
</html>

## vue-datatables-example.js

(function() {
  "use strict";
  window.addEventListener("load", function() {

    new Vue({
      el : '#example-page',

      data : {
        isFirstDataLoaded: false,
      },

      created: function() {
        // non-observable vars can go here
        this.dataTable = null;
        this.persons = [];
        this.init();
      },

      methods: function() {

        init: function() {
          var self = this;
          // using axios to get data from server
          axios.get('/rest/call/to/persons').then(function(response) {
            self.isFirstDataLoaded = true;
            if ( isGood(response) ) {
              self.persons = extractListOfData(response);
              Vue.nextTick(function() {
                // save a reference to the DataTable
                self.dataTable = $('#personsTable').DataTable({
                  "paging": true,
                  "pageLength": 50,
                  "info": false,
                  // etc
                });
              });
            }
            else {
              showWarning(response);
            }
          }).catch(function(error) {
            showWarning(error);
          });
        },
      },

      // call this with the person once you've confirmed you really want to delete it.
      // this deletes it from the DataTable, our non-observed list, and deletes it on the server too.
      handleConfirmedDelete: function(person) {
          var index = this.findIndex(person.personId);
          if ( null != index ) {
            // Found it in our non-observable list
            var self = this;
            // tell the server to delete the person
            axios.post('/rest/call/to/person/delete/'+candidate.executionId).then(function(response) {
              if ( isGood(response) ) {
                // tell DataTable to remove a row by id (which we set in the html).
                // the 'full-hold' is so that the pagination stays on the same page after deletion.
                self.dataTable.row('#row-'+person.personId).remove().draw('full-hold');
                // now clean up our list
                self.persons.splice(index, 1);
              }
              else {
                showWarning(response);
              }
            }).catch(function(error) {
              showWarning(error);
            });
          }
          else {
            // Wasn't in our list, but I found some corner cases where DataTables still hangs on and will
            // render an item that is no longer in our persons[] list. I could never pin it down, so I just
            // did this simple workaround. I'd like to know if someone can pin it down.
            self.dataTable.row('#row-'+person.personId).remove().draw('full-hold');
          }
        },

    }); // Vue

  });
}());
	<!DOCTYPE html>
	<html>
	<head>
	<title>Example Vue + DataTables</title>
	<!-- I happened to be using the bootstrap styling w/ DataTables. You may not need this. -->
	<link rel="stylesheet" href="/path/to/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
	</head>
	<body>
	<div id="example-page">

	<div v-show="isFirstDataLoaded" style="display:none">
	<table id="personsTable" class="table table-striped table-bordered table-responsive table-sm" cellspacing="0" width="100%">
	<thead>
	<tr>
	<th>id</th>
	<th>name</th>
	<th>address</th>
	<th>zip</th>
	</tr>
	</thead>
	<tfoot>
	<tr>
	<th>id</th>
	<th>name</th>
	<th>address</th>
	<th>zip</th>
	</tr>
	</tfoot>
	<tbody>
	<tr v-for="p in persons" :id="'row-'+p.personId">
	<td v-text="p.personId"></td>
	<td v-text="p.name"></td>
	<td v-text="p.address"></td>
	<td v-text="p.zip"></td>
	</tr>
	</tbody>
	</table>
	</div>

	</div><!-- example-page -->

	<script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="/path/to/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
	<script type="text/javascript" src="/path/to/vue-datatables-example.js"></script>

	</body>
	</html>

	(function() {
	"use strict";
	window.addEventListener("load", function() {

	new Vue({
	el : '#example-page',

	data : {
	isFirstDataLoaded: false,
	},

	created: function() {
	// non-observable vars can go here
	this.dataTable = null;
	this.persons = [];
	this.init();
	},

	methods: function() {

	init: function() {
	var self = this;
	// using axios to get data from server
	axios.get('/rest/call/to/persons').then(function(response) {
	self.isFirstDataLoaded = true;
	if ( isGood(response) ) {
	self.persons = extractListOfData(response);
	Vue.nextTick(function() {
	// save a reference to the DataTable
	self.dataTable = $('#personsTable').DataTable({
	"paging": true,
	"pageLength": 50,
	"info": false,
	// etc
	});
	});
	}
	else {
	showWarning(response);
	}
	}).catch(function(error) {
	showWarning(error);
	});
	},
	},

	// call this with the person once you've confirmed you really want to delete it.
	// this deletes it from the DataTable, our non-observed list, and deletes it on the server too.
	handleConfirmedDelete: function(person) {
	var index = this.findIndex(person.personId);
	if ( null != index ) {
	// Found it in our non-observable list
	var self = this;
	// tell the server to delete the person
	axios.post('/rest/call/to/person/delete/'+candidate.executionId).then(function(response) {
	if ( isGood(response) ) {
	// tell DataTable to remove a row by id (which we set in the html).
	// the 'full-hold' is so that the pagination stays on the same page after deletion.
	self.dataTable.row('#row-'+person.personId).remove().draw('full-hold');
	// now clean up our list
	self.persons.splice(index, 1);
	}
	else {
	showWarning(response);
	}
	}).catch(function(error) {
	showWarning(error);
	});
	}
	else {
	// Wasn't in our list, but I found some corner cases where DataTables still hangs on and will
	// render an item that is no longer in our persons[] list. I could never pin it down, so I just
	// did this simple workaround. I'd like to know if someone can pin it down.
	self.dataTable.row('#row-'+person.personId).remove().draw('full-hold');
	}
	},

	}); // Vue

	});
	}());