Laravel-datatables: comment l'utiliser dans vue.js

Créé le 18 févr. 2018 · 6Commentaires · Source: yajra/laravel-datatables

@yajra ,

puis-je demander de l'aide sur l'utilisation de 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>

c'est mon 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}
            ]
        });

    }
});

question

Source

ezekel

Tous les 6 commentaires

J'ai essayé à nouveau de jouer avec mon script de table de données vue personnalisé. Essayez d'utiliser l' essentiel que j'ai créé comme référence.

Duplicata de # 1607

Merci!

yajra le 11 mars 2018

@yajra J'ai un bouton d'action dans mon contrôleur pour éliminer ce qui est arrivé à la table, il est affiché et tout, ma question est de savoir comment le faire lorsque je clique avec la fonction @click de vue, js fonctionne.

`$('#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);`

Bolhy10 le 16 avr. 2018

Avez-vous trouvé une solution à @click?

antoniodesa le 27 sept. 2018

Non, j'ai trouvé la solution

Bolhy10 le 28 sept. 2018

👀5

quelqu'un a trouvé une solution pour v-on: cliquez?

Ubaidullah92 le 27 janv. 2019

Plug sans vergogne, j'ai écrit ce composant de wrapper de vue datatables.net: https://github.com/niiknow/vue-datatables-net - @ Ubaidullah92 qui devrait avoir une solution pour l'événement de clic

J'utilise yajra/laravel-datatables pour la réponse côté serveur. Pour le support natif de la vue, j'ai également écrit une vue bootstrap items-provider pour b-table ici https://github.com/niiknow/bvtnet-items-provider (voir démo)