A simple package to ease DataTable server side handling
This package is created to handle server-side rendring of DataTables by using Eloquent ORM, Query Builder or Collection.This package helps you to easily manage server side rendring of datatables if you are dealing with js libraries like Vue or React. Currently Element-UI is completely supported by this package. Soon some other populer libraries will also get supported.
return datatables(User::query());
return datatables(DB::table('users')->join1()->join2()->select(column1,column2,...columnK));
return datatables(DB::table('users')->get());
return datatables(User::all());function datatable also contain optional parameter $json with default value to true, set this param to false if you want to use instance of DataTable particular database driver class. eg, below code return instance of YS\vueDataTable\Eloquent class
return datatables(User::query(),false);vue-datatables also includes some other helper funcions that you can use if you want to use a particular database driver
return eloquent(User::query());
return query_bulder(DB::table('users')->join1()->join2()->select(column1,column2,...columnK));
return collection(DB::table('users')->get());
return collection(User::all()); let query = {
page: 1,
limit: 10,
keyword: '',
order: {
column: '',
direction: '',
},
filters: {"users.role_id":2},
};You must send query object given above in the query parameter in order to use this package.
- page represent page number in pagination
- limt number of records be displayed on a single page
- keyword key you want to search in table
- keyword string you want to search in table
- order handle ordering of columns in table. here key column represents name of ordering column and key direction represents direction. key direction can only have values ascending or descending.
- filters filters table data eg, role_id if you want to see users of a particular role only.
$ composer require iyogesharma/vue-datatable:"1.*"Register provider and facade on your config/app.php file.
'providers' => [
...,
YS\VueDatatable\DataTableServiceProvider::class,
] <template>
<div class="app">
<div class="filter-container">
<el-input
v-model="query.keyword"
style="width: 200px;"
class="filter-item"
clearable
@clear="resetKeyword"
@keyup.enter.native="handleFilter"
/>
<el-select
v-model="query.filters[`users.role_id`]"
clearable
style="width: 90px"
class="filter-item "
@clear="resetFilters"
@change="handleFilter"
>
<el-option
v-for="role in roles"
:key="role.id"
:label="role.name"
:value="role.id"
/>
</el-select>
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
@click="handleFilter"
>
search
</el-button>
</div>
<el-table
v-loading="loading"
:data="data"
border
fit
highlight-current-row
style="width: 100%"
@sort-change="sortList"
>
<el-table-column
sortable="custom"
prop="name"
align="center"
label="name"
>
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
sortable
align="center"
prop="email"
label="eamil"
>
<template slot-scope="scope">
<span>{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
sortable
align="center"
prop="role"
label="role"
>
<template slot-scope="scope">
<span>{{ scope.row.role }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'vue-datatable-test',
data() {
return {
data: null,
total: 0,
roles: [
{
id:1,
name: 'admin',
},
{
id:2,
name:'sub-admin'
}
],
query: {
page: 1,
limit: 10,
keyword: '',
order: {
column: '',
direction: '',
},
filters: {},
}
}
},
created () {
this.getDataFromStorage();
},
methods: {
async getDataFromStorage(){
let self = this;
await axios.get('/testUrl', {
params: self.query
})
.then( res => {
const { data, total } = res.data;
self.data = data;
self.total = total;
})
},
/**
* Handle tabel filter action
* @param data value of current filter
*
* @return void
*/
handleFilter(data) {
if (data === '') {
this.resetFilters();
}
this.query.page = 1;
this.getDataFromStorage();
},
/**
* Reset query filters to initial values
* @return {void}
*/
resetFilters() {
this.query.filters = {};
},
/**
* Reset query search keyword to initial value
* @return {void}
*/
resetKeyword() {
this.query.keyword = '';
this.getDataFromStorage();
},
/**
* Handle sort action of table
* @param {object} data sort details
*
* @return {void}
*/
sortList(data) {
const { prop, order } = data;
if (order){
if (prop === 'index') {
this.$refs['table'].data.sort(() => -1);
} else {
this.query.order['column'] = prop;
this.query.order['direction'] = order;
this.handleFilter();
}
}
}
}
}
</script>On server side use vueDataTable as
function testData()
{
return datatable(
User::join('roles','roles.id','=','users.role_id')
->select('users.name','users.email','users.id','users.role_id','roles.name as role')
);
}In the example given above you can also use component "el-pagination". keys total, query.limit and query.page can be used to create dynamic pagination.
The MIT License (MIT). Please see License File for more information.