Laravel-datatables: ๋™์ผํ•œ ๋ทฐ์—์„œ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” ์ง€์›

์— ๋งŒ๋“  2017๋…„ 03์›” 10์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: yajra/laravel-datatables

๋ฌธ์ œ ์š”์•ฝ ๋˜๋Š” ๊ธฐ๋Šฅ ์š”์ฒญ

๋™์ผํ•œ ํŽ˜์ด์ง€์— ํ‘œ์‹œํ•ด์•ผํ•˜๋Š” ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ”์ด 2 ๊ฐœ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ ์ž์ฒด ํŽ˜์ด์ง€์—์„œ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์ง€๋งŒ ๋Œ€์‹œ ๋ณด๋“œ ํŽ˜์ด์ง€์—๋Š” ๋‘˜ ๋‹ค ํฌํ•จ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๋‚ด๊ฐ€ ์ง๋ฉดํ•˜๋Š” ๋ฌธ์ œ :

  • HtmlBuilder๋Š” ์ƒˆ ํ…Œ์ด๋ธ” ์ž‘์„ฑ์„ ์‹œ์ž‘ํ•˜๋Š” ๋Œ€์‹  ๊ธฐ์กด ํ…Œ์ด๋ธ”์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•ฉ๋‹ˆ๋‹ค.
  • ๋ณด๊ธฐ์—์„œ HTML๊ณผ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๋ฉด ์„œ๋กœ ์ถฉ๋Œํ•ฉ๋‹ˆ๋‹ค.

๋‚ด ์งˆ๋ฌธ :

  • HtmlBuilder๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๋ฒˆ์งธ ํ…Œ์ด๋ธ”์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
  • ๊ฐ ํ…Œ์ด๋ธ”์„ ๊ณ ์œ ํ•˜๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ (ID ํฌํ•จ?), ๋ Œ๋”๋ง ๋œ HTML ๋ฐ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํ•ด๋‹น ID๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ?

๋ฌธ์ œ์˜ ์ฝ”๋“œ ์Šค ๋‹ˆํŽซ

๋‚ด ServiceProvider์—์„œ :

    public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTable = Datatables::getHtmlBuilder()
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTable = DataTables::getHtmlBuilder()
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

dashboard.blade.php์—์„œ

@section('content')
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            {!! $userTable->table() !!}
            {!! $userTable->scripts() !!}
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            {!! $groupTable->table() !!}
            {!! $groupTable->scripts() !!}
        </div>
    </div>
<strong i="20">@endsection</strong>

์‹œ์Šคํ…œ ์„ธ๋ถ€ ์ •๋ณด

  • ์šด์˜ ์ฒด์ œ : Win 10 (Laragon 2.1.4)
  • PHP ๋ฒ„์ „ : 7.0.12
  • ๋ผ ๋ผ๋ฒจ ๋ฒ„์ „ : 5.4.15
  • Laravel-Datatables ๋ฒ„์ „ : 7.3.0

์Šคํฌ๋ฆฐ ์ƒท

image 8

question

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

๋‚˜๋Š” ์ฃผ์œ„๋ฅผ ํŒŒํ—ค ์น˜๊ณ  ๊ทธ๊ฒƒ์„ ์ž‘๋™์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.

๋‚ด ๋นŒ๋”๋ฅผ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.

    public function register()
    {
        $this->app->bind('datatables.html.userTable', function () {
            return $this->app->make(Builder::class);
        });
        $this->app->bind('datatables.html.groupTable', function () {
            return $this->app->make(Builder::class);
        });
    }

๊ทธ๋Ÿฐ ๋‹ค์Œ ๋ถ€ํŒ… ๋ฐฉ๋ฒ• ()์—์„œ ๋นŒ๋”๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ํ…Œ์ด๋ธ” ์†์„ฑ 'id'๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

    public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTableBuilder = app('datatables.html.userTable');
            $userTable = $userTableBuilder
                ->setTableAttribute('id', 'userTable')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTableBuilder = app('datatables.html.groupTable');
            $groupTable = $groupTableBuilder
                ->setTableAttribute('id', 'groupTable')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

์Šคํฌ๋ฆฐ ์ƒท :

image 9

๊ฒ€์ƒ‰ ๋ฐ ์ •๋ ฌ์ด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

@Mopster app('datatables.html') ์•„๋ž˜์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

 public function boot()
    {
        View::composer(['dashboard', 'user.index'], function(\Illuminate\View\View $view){
            $userTable = app('datatables.html')
                ->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.username')])
                ->addColumn(['data' => 'name_en', 'name' => 'name_en', 'title' => trans('messages.name (english)')])
                ->addColumn(['data' => 'name_jp', 'name' => 'name_jp', 'title' => trans('messages.name (japanese)')])
                ->addColumn(['data' => 'phone_number', 'name' => 'phone_number', 'title' => trans('messages.phone number')])
                ->addColumn(['data' => 'extension', 'name' => 'extension', 'title' => trans('messages.extension')])
                ->addAction([])
                ->ajax(route('user_index_data'))
            ;
            $view->with('userTable', $userTable);
        });

        View::composer(['dashboard', 'group.index'], function(\Illuminate\View\View $view) {
            $groupTable = app('datatables.html')                
->addColumn(['data' => 'username', 'name' => 'username', 'title' => trans('messages.group username')])
                ->addColumn(['data' => 'name', 'name' => 'name', 'title' => trans('messages.group name')])
                ->addColumn(['data' => 'users', 'name' => 'users', 'title' => trans('messages.active users')])
                ->addAction([])
                ->ajax(route('group_index_data'));
            $view->with('groupTable', $groupTable);
        });
    }

Datatables::getHtmlBuilder() ํ•˜๋ฉด ํ•ญ์ƒ ๋‹จ์ผ ์ธ์Šคํ„ด์Šค๊ฐ€ ๋ฐ˜ํ™˜๋˜๊ณ  IoC์—์„œ ํ˜ธ์ถœํ•˜๋ฉด ์ƒˆ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

@yajra ์ •๋ง! ๊ฐ์‚ฌ!

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