Skip to content

Instantly share code, notes, and snippets.

@ShahanurSharif

ShahanurSharif/DataTable.vue

Created July 23, 2018 10:34
Show Gist options
  • Save ShahanurSharif/69d49fb517441e60d116352d1317cced to your computer and use it in GitHub Desktop.
Save ShahanurSharif/69d49fb517441e60d116352d1317cced to your computer and use it in GitHub Desktop.
Download ZIP
in progreee
Raw
DataTable.vue
<template>
<div>
<div class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row be-datatable-header card-header">
<div class="col-md-12 d-flex justify-content-between" id="adjustHeader">
<div class="d-flex align-items-center justify-content-start">
<div class="cateTitle">{{tableHeadline}}</div>
</div>
<div class="d-flex align-items-center justify-content-end">
<div class="input-group input-search dataTables_filter mr-2" v-if="search" id="catSearch">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-secondary">
<i class="icon mdi mdi-search"></i>
</button>
</span>
</div>
<router-link :to="{name:addLink}" class="btn btn-primary pt-1 pb-1 pl-5 pr-5 mr-2"> <i class="icon mdi mdi-plus"></i> Add </router-link>
<div class="btn-group">
<span class="icon mdi mdi-more-vert dropdown-toggle moreVert"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
</span>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Export</button>
<button class="dropdown-item" type="button">Import</button>
</div>
</div>
</div>
</div>
</div>
<div class="row be-datatable-body" v-if="dataList.length">
<div class="col-sm-12">
<table class="table table-striped table-hover table-fw-widget dataTable no-footer table_block" id="table1"
role="grid" aria-describedby="table1_info">
<thead>
<tr role="row">
<th v-for="(column, index) in columns" class="sorting"
tabindex="0"
rowspan="1"
colspan="1"
:id="column.field"
@click="onClickColumn">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="data in dataList">
<slot name="items" v-bind:data="data">
</slot>
</tr>
</tbody>
</table>
</div>
</div>
<div class="center-screen" v-else>
<atom-spinner :color="'#4285f4'"></atom-spinner>
</div>
<div class="row be-datatable-footer">
<div class="col-sm-5 d-flex align-items-center flex-wrap" id="bottomAdjust">
<div class="dataTables_length">
<label>Show
<select style="text-align-last: center; height: 24px;" name="table1_length" id="resultPerPage"
aria-controls="table1"
class="form-control form-control-sm customShown" @change="onChangePerPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select> Entries</label>
</div>
<div class="dataTables_info" id="table1_info" role="status" aria-live="polite">( Showing {{from}} to
{{to}}
of {{total}} )
</div>
</div>
<div class="col-sm-7" id="adjustPagination">
<div class="dataTables_paginate paging_simple_numbers mt-1" v-if="paging">
<ul class="pagination">
<li :class="{'paginate_button': true, 'page-item':true, 'previous':true, 'disabled':(current_page === 1)}"
id="table1_previous">
<a tabindex="0" class="page-link" @click="getResult(current_page - 1)">Previous</a>
</li>
<template v-for="page in last_page">
<li :class="{'paginate_button': true, 'page-item':true, 'active':(page === current_page)}"
v-if="Math.abs(page - current_page) < 3">
<a tabindex="0" class="page-link" @click="getResult(page)">{{page}}</a>
</li>
</template>
<li :class="{'paginate_button': true, 'page-item':true, 'next':true, 'disabled':(current_page === last_page)}"
id="table1_next">
<a tabindex="0" class="page-link" @click="getResult(current_page + 1)">Next</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default: () => []
},
columns: {
type: Array,
default: () => []
},
ajax: {
type: Object,
default: () => {
}
},
paging: {
type: Boolean,
default: () => true
},
scrollX: {
type: Boolean,
default: () => false
},
scrollY: {
type: Boolean,
default: () => false
},
select: {
type: Boolean,
default: () => false
},
search: {
type: Boolean,
default: () => false
},
sorting: {
type: Boolean,
default: () => true
},
addLink: {
type: String,
default: () => ''
},
tableHeadline:{
type:String,
default:()=>''
}
},
data() {
return {
dataList: [],
columnList: [],
sortName: 'id',
sortOrder: 'desc',
current_page: 1,
last_page: 0,
per_page: 0,
total: 0,
path: '',
from: 0,
to: 0,
pageLimit: 10,
resultPerPage: 10,
options: [
{id: 1, label: 'foo'},
{id: 3, label: 'bar'},
{id: 2, label: 'baz'},
],
selected: {id: 3, label: 'bar'},
}
},
created() {
if (_.isEmpty(this.ajax)) {
this.dataList = this.data
} else {
this.getResult()
}
},
methods: {
onClickColumn(e) {
if (this.sorting) {
let sortname = $(e.target).text().trim().toLowerCase().replace(' ', '_')
this.sortName = sortname != 'action' ? sortname : 'id'
// this.sortName = e.target.id
if (e.target.classList[0] === 'sorting') {
e.target.classList.remove('sorting')
e.target.classList.add('sorting_asc')
this.sortOrder = 'asc'
} else if (e.target.classList[0] === 'sorting_asc') {
e.target.classList.remove('sorting_asc')
e.target.classList.add('sorting_desc')
this.sortOrder = 'desc'
} else if (e.target.classList[0] === 'sorting_desc') {
e.target.classList.remove('sorting_desc')
e.target.classList.add('sorting_asc')
this.sortOrder = 'asc'
}
this.removeAllSorting(e.target.parentElement.childNodes, e)
this.getResult()
}
},
removeAllSorting(childList, e) {
for (var i = 0; i < childList.length; i++) {
if (childList[i].id === e.target.id) continue
childList[i].classList.remove('sorting_asc')
childList[i].classList.remove('sorting_desc')
childList[i].classList.add('sorting')
}
},
getResult(page = 1) {
this.current_page = page
if (!_.isEmpty(this.ajax)) {
axios.get(this.ajax.url, {
params: {
sortName: this.sortName,
sortOrder: this.sortOrder,
paging: this.paging,
page: page,
resultPerPage: this.resultPerPage
}
}).then(response => {
if (this.paging) {
this.dataList = response.data.data
this.current_page = response.data.current_page
this.last_page = response.data.last_page
this.per_page = response.data.per_page
this.total = response.data.total
this.path = response.data.path
this.from = response.data.from
this.to = response.data.to
} else {
this.dataList = response.data
}
});
}
},
onChangePerPage() {
this.resultPerPage = document.getElementById('resultPerPage').value;
console.log(this.resultPerPage);
this.getResult()
}
}
}
</script>
<style scoped>
.btn{
line-height: 25px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment