Laravel-datatables: 한 페이지의 다른 탭에서 2 개의 데이터 테이블을 렌더링하는 방법

에 만든 2017년 06월 12일 · 9코멘트 · 출처: yajra/laravel-datatables

문제 요약 또는 기능 요청

안녕하세요, 좋은 하루 되세요.
질문하고 도움이 필요합니다. 탭 2 개가있는 페이지를 만들었습니다. 탭 # 1은 하루 데이터를 표시하고, 탭 # 2는 시간당 데이터를 표시하고, 그 두 탭에서 동일한 테이블을 만들려고합니다. 탭 # 1, 탭 # 2에 열 이름 만 표시됩니다. 왜 이런 일이 발생합니까?

문제의 코드 스 니펫

내 컨트롤러에 잘못된 것이 있다고 생각했는데, 이것은 코드입니다.

public function index(InsightDataTable $dataTable)
    {
        return $dataTable->render('admin.report.insight.index');
    }

그래서 컨트롤러에서 여러 데이터 테이블을 렌더링하는 방법을 묻고 싶습니다.
감사합니다.
아 그리고 이것은 내 index.blade.php의 코드입니다.

@section('content')
    @include('admin.notification')
    <div class="row">
            <div class="col-xs-12">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="hari"><a href="#hari" data-toggle="tab">Hari</a></li>
                        <li class="jam"><a href="#jam" data-toggle="tab">Jam</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="hari tab-pane" id="hari">
                        <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                        </div>

                      <div class="jam tab-pane" id="jam">
                            <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                      </div>

                    </div>
                  </div>
                </div>

            </div>
<strong i="16">@endsection</strong>

@section('custom_js')
    <script> 
        dateSelection = false;
        $('.date-range').daterangepicker();
        $('.date-range').on('apply.daterangepicker', function(ev, picker) {
            $('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
                data.firstDate = picker.startDate.format('YYYY-MM-DD');
                data.lastDate = picker.endDate.format('YYYY-MM-DD');
                merge_date = data.firstDate+'_'+data.lastDate;
            });       
            var table = $('#dataTableBuilder').DataTable();
           table.ajax.reload();
           dateSelection =true;                 
        });

        $("#export_file").click(function() {
            if(dateSelection == false) {
                window.location.href = "{{ url('admin/report/insight/export/all') }}";
            } else {
                window.location.href = "{{ url('admin/report/insight/export') }}/"+merge_date;
            }
            return false;
        });

    </script>
    {!! $dataTable->scripts() !!}
<strong i="17">@endsection</strong>

시스템 세부 정보

시스템에 대한 세부 정보를 포함하십시오! 생략하면 다른 사용자의 요청 / 티켓보다 티켓의 우선 순위가 낮아집니다.

운영 체제 : Ubuntu 16.04
PHP 버전 : 7
Laravel 버전 : 5.2
Laravel-Datatables 버전 : 6.0

question

출처

faisalhilmi

👀1 👍1

가장 유용한 댓글

"짧막 한 농담:

    public function show(PrimaryDataTable $primaryDataTable, SecondDataTable $secondDataTable)
    {
        /**  Depend request we need to match proper class */
        return ${request()->get('table', 'primary') . 'DataTable'}->render(
            'resource.show',
            compact('primaryDataTable', 'secondDataTable')
        );
    }

또한 축소 된 ajax에주의하고,이 메소드를 호출 한 후 ajax 데이터를 추가하십시오.

mgralikowski 에 2020년 12월 03일

🎉1 👍1

모든 9 댓글

https://datatables.yajrabox.com/services/two-datatables

isometriq 에 2017년 06월 18일

그러나 테이블에 서비스 기반 접근 방식을 사용하고 다른 테이블에는 다른 방식을 사용하는 것을 좋아하지 않습니다. 일관성을 위해 더 분리하는 방법을 알고 싶습니다. .. 이러한 구조를 만드는 것이 가능합니까? :

UsersDatatableController
사용자를 위해 데이터 테이블을 독점적으로 관리합니다.
보기는 데이터 테이블을 렌더링하고 ajax 요청을 처리하기위한 것입니다.

PostsDatatableController
게시물 (일반 또는 사용자 관련)에 대한 데이터 테이블을 독점적으로 관리합니다.
보기는 데이터 테이블을 렌더링하고 ajax 요청을 처리하기위한 것입니다.

UsersController
렌더링을 위해 UsersDatatableController 및 PostsDatatableController를 사용하고 동일한 뷰, 탭, 오버 언더 등에 배치합니다. 데이터 테이블의 ajax 호출은이 컨트롤러에서 처리되지 않습니다. 이 컨트롤러를 구상하는 것은 내부에 데이터 테이블이있는 일반 페이지 대신 편집 양식을위한 것일 수도 있습니다.

내 사용 사례는 서버 측 데이터 테이블을 렌더링하는 것이므로
https://github.com/imanghafoori1/laravel-widgetize
이
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-components-to-build-a-view

헉
Lemme 당신의 생각 thx를 알고

isometriq 에 2017년 06월 18일

@isometriq atm, 기본적으로 ajax 처리를 위해 동일한 경로 내에서 두 개의 DataTable 클래스를 사용할 수 없다고 생각합니다. 그러나 요청되는 ajax 응답을 식별하는 데 사용할 수있는 추가 매개 변수를 추가 할 수 있습니다.

public function index(UsersDatatable $udt, PostsDatatable $pdt) {
  if (request()->get('table') == 'posts') {
    return $udt->render('my.view', compact('udt', 'pdt'));
  }

  return $pdt->render('my.view', compact('udt', 'pdt'));
}

그런 다음보기에서 두 DT 모두에 빌더를 사용할 수 있습니다.

{!! $udt->html()->table() !!} // users table
{!! $pdt->html()->table() !!} // posts table

{!! $udt->scripts() !!} // users table scripts
{!! $pdt->scripts() !!} // posts table scripts

탐색을 시도 할 수있는 아이디어입니다. 감사!

yajra 에 2017년 06월 20일

👍2

감사합니다 @yajra 몇 가지 시도해 볼게요

isometriq 에 2017년 06월 22일

이 질문에 감사드립니다. @yajra가 제안한대로 작동

{!! $udt->html()->table(['id' => 'udt']) !!} // users table
{!! $pdt->html()->table(['id' => 'pdt']) !!} // posts table

{!! $udt->html()->scripts() !!} // users table scripts
{!! $pdt->html()->scripts() !!} // posts table scripts

js가 제대로 작동하도록 각 테이블에 고유 한 id 속성을 전달해야합니다. 이것이 누군가를 돕기를 바랍니다!

그리고 DataTable 클래스에서 html () 메서드의 추가 매개 변수를 전달했습니다.

public function html() {

    return $this->builder()
        ->ajax(['data' => 'function(d) { d.table = "posts"; }'])
        ->parameters($this->getBuilderParameters());
}

@yajra 는 https://datatables.yajrabox.com/services/two-datatables 의 최신 문서에이 예제가 대신 있으면 좋을 것입니다.

benlwong 에 2017년 12월 21일

👍2

@benlwong 피드백에 감사드립니다. 데모 소스 코드는 여기에서 사용할 수

yajra 에 2017년 12월 22일

안녕하세요, 저는이 게시물의 솔루션을 따랐고 동시에 작업하는 두 개의 데이터 테이블을 얻었습니다!
하지만 .. 일반 페이지가로드 될 때 동시에로드되는 것을 원하지 않습니다.

특정 탭 / 버튼을 클릭 할 때 두 번째 데이터 테이블을로드하고 싶습니다.
페이지에서 보았습니다 : https://datatables.yajrabox.com/services/two-datatables

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {
        $('#postsTable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            buttons: [
                'csv', 'excel', 'pdf', 'print', 'reset', 'reload'
            ],
            ajax: '/services/two-datatables/posts',
            columns: [
                {data: 'id', name: 'posts.id'},
                {data: 'title', name: 'posts.title'},
                {data: 'created_by', name: 'users.name', width: '110px'},
                {data: 'created_at', name: 'posts.created_at', width: '120px'},
                {data: 'updated_at', name: 'posts.updated_at', width: '120px'},
            ],
            order: [[0, 'desc']]
        });
    }
}

그것은 기본적으로 datatable의 JS를 래핑하는 if 문을 추가하는 것으로 구성되지만이 게시물에서했던 것처럼 DataTable Service 구현을 통한 솔루션을 원합니다. 이 같은:

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {

        {!! $secondDataTable->html()->scripts() !!}

    }
}

그러나 이것은 "scripts ()"함수가 태그를 인쇄하기 때문에 수행 할 수 없습니다.