@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}
]
});
}
});
์ฌ์ฉ์ ์ ์ 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 (๋ฐ๋ชจ ์ฐธ์กฐ)