VueJs + Jquery Datatables - Client Side Processing

POC VueJs + Jquery Datatables

by Roman Joseph Rimorin

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app" class="container">
<h3 class="mt-3">Add User</h3>
  <hr>
<div class="row">
  <div class="col">

    <label>User ID</label>
    <input type="number" class="form-control" v-model="id">
  </div>
    <div class="col">

    <label>User name</label>
    <input type="text" class="form-control" v-model="name">
  </div>
    <div class="col">

    <label>User Email</label>
    <input type="text" class="form-control" v-model="email">
  </div>
  
  </div>
  <button class="btn btn-info mt-2" @click="addUser">Add User</button>
  <hr>
  
  <div class="row">
    <div class="col">
      <div class="table-responsive">
          <vue-datatable-component 
            id="testId" 
            ref="myGridTable"
            :fields="fields"
            :opts= "opts">
          </vue-datatable-component>
      </div>
    </div>
  </div>
</div>

<div id="vue-datatable-component" class="d-none">
  <table :id="id" :class= "className" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th v-for="field in fields">
          <div v-if="field.render" v-html="field.render()">
          </div>
          <div v-else>
            {{ field.label }}
          </div>
        </th>
      </tr>
   ...

CSS

i.details-control{
  cursor: pointer;
}

JavaScript

Vue.component("vue-datatable-component", {
  template: "#vue-datatable-component",
  props: {
    /**
     * The table id - useful for saveState
     *
     * @type String
     */
    id: {
      type: String
    },
    /**
     * Set the container classes.
     *
     * @type String
     */
    containerClassName: {
      type: String,
      default: 'table-responsive d-print-inline'
    },
    /**
     * Set the table classes you wish to use, default with bootstrap4
     * but you can override with: themeforest, foundation, etc..
     *
     * @type String
     */
    className: {
      type: String,
      default: 'table table-striped table-bordered nowrap w-100'
    },
    /**
     * the options object: https://datatables.net/manual/options
     *
     * @type Object
     */
    opts: {
      type: Object
    },
    /**
     * List all fields to be converted to opts columns
     *
     * @type Object
     */
    fields: {
      type: Object
    },
    /**
     * Pass in DataTables.Net jQuery to resolve any conflict from
     * multiple jQuery loaded in the browser
     *
     * @type Object
     */
    jquery: {
      type: Object
    },
    /**
     * Pass in Vue to resolve any conflict from multiple loaded
     *
     * @type Object
     */
    vue: {
      type: Object
    },
    /**
     * The select-checkbox column index (start at 1)
     * Current implementation require datatables.net-select
     *
     * @type Number
     */
    selectCheckbox: {
      type: Number
    },
    /**
     * Provide custom local data loading.  Warning: this option has not been
     * thoroughly tested.  Please use ajax and serverSide instead.
     *
     * @type Function
     */
    dataLoader: {
      type: Function
    },
    /**
     * true to hide the footer of the table
     *
     * @type Boolean
     */
    hideFooter: {
      type: Boolean
    },
    /**
     * The details column configuration of master/details.
     *
     * @type {Object}
     */
    details: {
  ...