Laravel-datatables: wie man dies in vue.js benutzt

Erstellt am 18. Feb. 2018 · 6Kommentare · Quelle: yajra/laravel-datatables

@yajra ,

Kann ich um Hilfe bitten, wie man in vue.js verwendet?

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>

das ist meine 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

Quelle

ezekel

Alle 6 Kommentare

Ich habe erneut versucht, mit meinem benutzerdefinierten vue-Datentabellenskript zu spielen. Versuchen Sie, das Wesentliche, das ich erstellt habe, als

Duplikat von # 1607

Vielen Dank!

yajra am 11. März 2018

@yajra Ich habe eine Aktionsschaltfläche in meinem Controller, um zu beseitigen, was mit der Tabelle passiert ist. Sie wird angezeigt und alles. Meine Frage ist, wie ich das mache, wenn ich mit der Funktion @click de vue klicke.

`$('#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 am 16. Apr. 2018

Haben Sie eine Lösung für @click gefunden?

antoniodesa am 27. Sept. 2018

Nein, ich habe die Lösung gefunden

Bolhy10 am 28. Sept. 2018

👀5

hat jemand eine lösung für v-on gefunden: klick?

Ubaidullah92 am 27. Jan. 2019

Schamloser Plug, ich habe diese datueables.net vue-Wrapper-Komponente geschrieben: https://github.com/niiknow/vue-datatables-net - @ Ubaidullah92, die eine Lösung für das Klickereignis haben sollte

Ich verwende yajra/laravel-datatables für die serverseitige Antwort. Für die native Vue-Unterstützung habe ich auch einen Bootstrap-Vue items-provider für b-table hier https://github.com/niiknow/bvtnet-items-provider geschrieben (siehe Demo).

noogen am 8. Apr. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Laravel-datatables: wie man dies in vue.js benutzt

Alle 6 Kommentare

Verwandte Themen