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
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
<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"} ];