Closed ezekel closed 1 year ago
I tried to play with my custom vue data-table script again. Try using the gist I created as a ref.
Duplicate of #1607
Thanks!
@yajra I have an action button in my controller to eliminate what happened to the table, it is shown and everything, my question is how do I do it for when I click with function @click de vue, js work.
`$('#user-datable').DataTable({
processing: true,
serverSide:true,
language:{
'url': '{!! asset('assets/plugins/datatable/spanish.json') !!}'
},
ajax: '{!! route('user.index') !!}',
columns:[
{data: 'id', name: 'users.id'},
{data: 'firstname', name: 'users.firstname'},
{data: 'lastname', name: 'lastname'},
{data: 'username', name: 'username'},
{data: 'email', name: 'email'},
{data: null, render: function (data) {
return '<span class="badge badge-primary">'+data.display_name+'</span>'
}, orderable:false, searchable:false},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});`
`return DataTables::eloquent($users)->addColumn('display_name', function (User $user) {
return $user->roles->map(function($role) {
return str_limit($role->display_name, 30, '...');
})->implode(', ');
})->addColumn('action', function ($user) {
return '<a href="user/'.$user->id.'/edit" class="btn btn-default btn-sm btn-icon-anim btn-circle"><i class="fa fa-edit"></i></a>
<button type="button" class="btn btn-default btn-sm btn-icon-anim btn-circle" v-on:click="dete('.$user->id.')"><i class="fa fa-trash"></i></button>';
})->make(true);`
Did you found a solution to @click?
No, I have found the solution
any one found a solution to v-on:click?
Shameless plug, I wrote this datatables.net vue wrapper component: https://github.com/niiknow/vue-datatables-net - @Ubaidullah92 which should have solution for click event
I'm using yajra/laravel-datatables
for server-side response. For native vue support, I also wrote a bootstrap vue items-provider
for b-table
here https://github.com/niiknow/bvtnet-items-provider (see demo)
@yajra any one found a solution to v-on:click? it is not working
methods:{
allEmployee(){
axios.get('/api/employee/')
.then(({data}) => (this.employees=data))
.catch()
},
draw() {
$('.btn-delete').on('click', function() {
alert('delete')
})
},
DeleteEmployee(id){
alert(id);
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
axios.delete('/api/employee/'+id)
.then(()=> {
this.employees=this.employees.filter( employee =>{
return employee.id !=id
})
})
.catch(()=> {
this.$router.push({name:'employee'})
})
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
},
},
created(){ //this.allEmployee();
$(document).ready( function () {
// $.noConflict();
$('#myTable').DataTable({
"processing": true,
"serverSide": true,
"ajax": "api/employee",
"columns": [
{data: 'name', name: 'name'},
{ data: 'photo', name: 'photo',
render: function( data, type, full, meta ) {
return "<img src=\"" + data + "\" height=\"45\"/>";
}
},
{data: 'email', name: 'email'},
{data: 'phone', name: 'phone'},
{data: 'salary', name: 'salary'},
{data: 'joining_date', name: 'joining_date'},
{
data: 'id',name: 'action',
render: function(data){
let btn;
btn='<router-link :to="{name: edit-employee, params:{id:'+data+'}}" class="btn btn-sm btn-primary">Edit</router-link>';
btn= btn+ ' <button id=".btn-delete" v-on:click="draw()" class="edit btn btn-danger btn-sm m-2">Delete</button>';
return btn;
},
},
]
});
});
Hello, @Bolhy10. Did you get answer for this question please?
See https://datatables.net/blog/2022-06-22-vue. I was not able to use VueJS further with DataTables so I may not be able to answer this accurately. I think we should redirect the questions to the official package.
Closing this issue since it's also out of the project scope. Thanks!
@yajra ,
can I ask some help how to use in vue.js ?
index.blade
this is my getdata.js