Laravel-datatables: vue.js์—์„œ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

์— ๋งŒ๋“  2018๋…„ 02์›” 18์ผ  ยท  6์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: yajra/laravel-datatables

@yajra ,

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>

์ด๊ฒƒ์€ ๋‚ด 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

๋ชจ๋“  6 ๋Œ“๊ธ€

์‚ฌ์šฉ์ž ์ •์˜ vue ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค์‹œ ์‚ฌ์šฉํ•˜๋ ค๊ณ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋งŒ๋“  ์š”์ ์„ ์ฐธ์กฐ๋กœ ์‚ฌ์šฉํ•ด๋ณด์‹ญ์‹œ์˜ค.

# 1607๊ณผ ์ค‘๋ณต

๊ฐ์‚ฌ!

@yajra ๋‚ด ์ปจํŠธ๋กค๋Ÿฌ์— ํ…Œ์ด๋ธ”์— ๋ฐœ์ƒํ•œ ์ผ์„ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด ์ž‘์—… ๋ฒ„ํŠผ์ด ์žˆ์œผ๋ฉฐ ํ‘œ์‹œ๋˜๊ณ  ๋ชจ๋“  ๊ฒƒ์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๋‚ด ์งˆ๋ฌธ์€ @click de vue, js ์ž‘์—… ๊ธฐ๋Šฅ์œผ๋กœ ํด๋ฆญ ํ•  ๋•Œ ์–ด๋–ป๊ฒŒํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

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

@click์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๊นŒ?

์•„๋‹ˆ์š”, ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.

v-on : click์— ๋Œ€ํ•œ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์€ ์‚ฌ๋žŒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

๋ป”๋ป”ํ•œ ํ”Œ๋Ÿฌ๊ทธ, ๋‚˜๋Š”์ด datatables.net vue ๋ž˜ํผ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค : https://github.com/niiknow/vue-datatables-net-@ Ubaidullah92 ๋Š” ํด๋ฆญ ์ด๋ฒคํŠธ์— ๋Œ€ํ•œ ์†”๋ฃจ์…˜์ด ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์„œ๋ฒ„ ์ธก ์‘๋‹ต์— yajra/laravel-datatables ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋„ค์ดํ‹ฐ๋ธŒ vue ์ง€์›์„ ์œ„ํ•ด b-table ๋Œ€ํ•œ ๋ถ€ํŠธ ์ŠคํŠธ๋žฉ vue items-provider ๋„ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค https://github.com/niiknow/bvtnet-items-provider (๋ฐ๋ชจ ์ฐธ์กฐ)

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰