how to use this in vue.js

[ezekel]

@yajra ,

can I ask some help how to use in vue.js ?

index.blade

   <div class="row" id="app">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"><a href="{{ route('credit.create') }}" type="button" class="btn btn-block btn-success btn-flat">Create</a></h3>
                </div>
                <div class="table-responsive box-body">

                    <table width="100%" class="table table-bordered table-striped" id="my-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th width="20%;"></th>
                        </tr>
                        </thead>

                    </table>

                </div>
            </div>
        </div>

    </div>

this is my getdata.js

new Vue({
    el:'#app',
    created: function () {
        var mytable= $('#my-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: 'getdata',
            columns: [
                {data: 'particulars', name: 'particulars'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });

    }
});

[yajra]

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!

[Bolhy10]

@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);`

[antoniodesa]

Did you found a solution to @click?

[Bolhy10]

No, I have found the solution

[Ubaidullah92]

any one found a solution to v-on:click?

[noogen]

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)

[mdsagor07]

@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;

         },

      },

            ]
        });

});

[bkens]

Hello, @Bolhy10. Did you get answer for this question please?

[yajra]

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!