vuejs datatable example – Datatable component using Vuejs-vuejs datatable

vuejs datatable example – Datatable component using Vuejs-vuejs datatable

Allows for quick way and easy step by step to setup of filterable dataTable, sortable function, and paginated display tables and more.. Currently supports both Like as Vue.js 1 version and Vue.js 2 version.

Installation

npm install vuejs-datatable

Datatable component for Vuejs Example

1.Search
2.Pagination
3.Ordering
4.filterable

Include Libs

A datatable simple component build with Vuejs example. andVuejs – creating a easy way to Paginated Table dynemically with Search

<a href="http://vue.min.js">http://vue.min.js</a>
<a href="http://jquery.min.js">http://jquery.min.js</a>
<a href="http://jquery.dataTables.min.js">http://jquery.dataTables.min.js</a>
<a href="http://js/index.js">http://js/index.js</a>

index.html

  
  <title>vuejs datatable example - Datatable component using Vuejs-vuejs datatable</title>


  

index.js

var TagDataTable = {};

TagDataTable.install = function(Vue, options) {
  'use strict';

  Vue.component('datatable', {
    name: 'datatable',
    template: '<table id="example"></table>',
    props: ['data'],

    data: function() {
      return {
        data: []
      };
    },
    //vuejs watch props
    watch: {
      data: {
        handler: function(val, oldVal) {
          this.DataTable.fnClearTable();
          this.DataTable.fnAddData(val);
        },
        deep: true
      }
    },    
    
    ready: function() {

      this.DataTable = $('#example').dataTable({
        data: this.data,
        columns: [
          { title: "clientName", mData: "clientName" },
          { title: "AdminName", mData: "AdminName" },
          { title: "Ruppe", mData: "Ruppe" },
          { title: "Blude", mData: "bludper" },
          { title: "Contact", mData: "Contact" }
        ]
      });      

    }

  });

};
Vue.use(TagDataTable);

var vm = {};

$(document).ready(function() {
  vm = new Vue({
    el: 'body', 
        data: {
      employers: dataPerson
    }
  });
  
  setTimeout(function() {
    vm.employers[4].clientName = 'German !!';
    console.log(vm.employers[4].clientName);
  }, 5000);
  
});

var dataPerson = [
    {id: 1, clientName: 'natha', AdminName: 'sejal', dateofbirth: '25072018', Ruppe: 10.98, bludper: 1, enable: true, Contact: "9898-9099"},
    {id: 2, clientName: 'natha', AdminName: 'sejal', dateofbirth: '25072018', Ruppe: 10.98, bludper: 100, enable: false, Contact: "9898-9099"},
    {id: 3, clientName: 'natha', AdminName: 'sejal', dateofbirth:  '25072018', Ruppe: 100.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 4, clientName: 'girdhar', AdminName: 'parsh', dateofbirth: '25072018', Ruppe: 4141.98, bludper: 97.5, enable: true, Contact: "9898-9099"},
    {id: 5, clientName: 'Alejandro', AdminName: 'mayur', dateofbirth: '07/25/2018', Ruppe: 4141.98, bludper: 65, enable: true, Contact: "9898-9099"},
    {id: 6, clientName: 'Dario', AdminName: 'mayur', dateofbirth: '07252018', Ruppe: 4141.98, bludper: 43.256, enable: true, Contact: "9898-9099"},
    {id: 7, clientName: 'sanjay', AdminName: 'tejash', dateofbirth: '20180725', Ruppe: -4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 8, clientName: 'matriy', AdminName: 'tejash', dateofbirth: '25.07.2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 9, clientName: 'kajal', AdminName: 'parsh', dateofbirth: 'Mon Jul 25 2018 00:00:00 GMT-0300 (Argentina Standard Time)', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 10, clientName: 'chandni', AdminName: 'tejash', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 11, clientName: 'muntranjay', AdminName: 'sejal', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 12, clientName: 'dharvik', AdminName: 'parsh', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 13, clientName: 'deepak', AdminName: 'mayur', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 14, clientName: 'krunal', AdminName: 'tejash', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 15, clientName: 'manshi', AdminName: 'tejash', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 16, clientName: 'krishna', AdminName: 'parsh', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 17, clientName: 'bhoomi', AdminName: 'mayur', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 18, clientName: 'pratik', AdminName: 'sejal', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 19, clientName: 'jigar', AdminName: 'Marley', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 20, clientName: 'shah', AdminName: 'Gates', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"},
    {id: 21, clientName: 'dave', AdminName: 'hitesh', dateofbirth: '25/07/2018', Ruppe: 4141.98, bludper: 100, enable: true, Contact: "9898-9099"}
];

Example