lara-vue-datatable
v0.0.18
Published
Laravel and Vuejs based custom datatable with pagination, search and page length
Downloads
5
Maintainers
Readme
npm install lara-vue-datatable
import {DataTable, TableLength, Pagination, Search, TableStore} from "lara-vue-datatable";
<TableLength :options="tableLength"/>
<search></search>
<data-table
:url="'http://neomeet.local/api/users'"
:columns="columns"
:dbcolumns="dbcolumns"
:styles="'table-striped table-responsive'"
:buttons="[
{
label: 'Edit',
class: 'btn btn-success btn-sm',
action: 'edit'
},{
label: 'Delete',
class: 'btn btn-danger btn-sm',
action: 'delete'
},
]"
>
</data-table>
<Pagination/>
export default {
components: {
TableLength,
Pagination,
SandeshVueTable,
Search,
TableStore
},
data() {
return {
tableLength: {
default: 3,
lengths: [1,2,3,4,5],
},
columns: ['Name','Slug','Phone','Email'],
dbcolumns: ['name','slug','phone','email'],
}
},
methods: {
edit(data) {
prompt('Editing ' + data.name);
},
destroy(data) {
alert('Are you sure you want to delete ' + data.name + 'from system ?' );
},
}
computed: {
action() {
return TableStore.getters.getAction;
}
},
watch: {
action() {
if (this.action.method === 'delete') {
this.destroy(this.action.data);
} else if (this.action.method === 'edit') {
this.edit(this.action.data);
}
}
},
}
public function getUsers()
{
$length = request('per_page')??5;
$search = request('searchText') ?? request('searchText');
return User::where('name','like', '%'.$search.'%')->paginate($length);
}
npm run dev