vuejs jquery datatable Add advanced interaction controls to your HTML tables

	<div id="tabledemo">
	<h3>Vue Datatable example</h3>
	Filter by anything: <input v-model="search">
	<hr>
	<data-table :comments="filteredComments"></data-table>
	</div>

view raw index.html hosted with ❤ by GitHub

	Vue.component('data-table', {
	render: function (createElement) {
	return createElement(
	"table", null, []
	)
	},
	props: ['comments'],
	data() {
	return {
	headers: [
	{ title: 'Name' },
	{ title: 'Email' },
	{ title: 'Body' },
	],
	rows: [] ,
	dtHandle: null
	}
	},
	watch: {
	comments(val, oldVal) {
	let vm = this;
	vm.rows = [];
	val.forEach(function (item) {
	let row = [];
	row.push(item.name);
	row.push('<a href="mailto://' + item.email + '">' + item.email + '</a>');
	row.push(item.body);
	vm.rows.push(row);
	});
	vm.dtHandle.clear();
	vm.dtHandle.rows.add(vm.rows);
	vm.dtHandle.draw();
	}
	},
	mounted() {
	let vm = this;
	vm.dtHandle = $(this.$el).DataTable({
	columns: vm.headers,
	data: vm.rows,
	searching: true,
	paging: true,
	info: false
	});
	}
	});
	new Vue({
	el: '#tabledemo',
	data: {
	comments: [],
	search: ''
	},
	computed: {
	filteredComments: function () {
	let self = this
	let search = self.search.toLowerCase()
	return self.comments.filter(function (comments) {
	return comments.name.toLowerCase().indexOf(search) !== -1 ||
	comments.email.toLowerCase().indexOf(search) !== -1 ||
	comments.body.toLowerCase().indexOf(search) !== -1
	})
	}
	},
	mounted() {
	let vm = this;
	$.ajax({
	url: 'https://jsonplaceholder.typicode.com/comments',
	success(res) {
	vm.comments = res;
	}
	});
	}
	});

view raw script.js hosted with ❤ by GitHub

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

view raw scripts hosted with ❤ by GitHub

<link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

view raw styles hosted with ❤ by GitHub

vue jquery datatable

A Pen by Edward Lance Lorilla on CodePen.

License.

view raw vue-jquery-datatable.markdown hosted with ❤ by GitHub