Laravel-datatables: Cara merender 2 data yang dapat diakses dalam satu halaman tab yang berbeda

Dibuat pada 12 Jun 2017  ·  9Komentar  ·  Sumber: yajra/laravel-datatables

Ringkasan masalah atau permintaan fitur


Hai, selamat siang.
Saya ingin menanyakan sesuatu dan butuh bantuan Anda, saya membuat halaman yang memiliki 2 tab, tab # satu menampilkan data per hari, tab #two menampilkan data per jam, saya mencoba membuat tabel yang sama di dua tab itu, tetapi hanya tampil di tab #one, di tab #dua hanya menampilkan nama kolom, mengapa ini terjadi?

Potongan kode masalah

saya curiga ada yang salah di pengontrol saya, ini kodenya:

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

jadi saya ingin bertanya bagaimana membuat beberapa datatable di controller.
Terima kasih.
Oh dan ini kode di index.blade.php saya

@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>

Detail sistem

Harap sertakan detail ini tentang sistem Anda! Jika mereka dihilangkan, tiket akan diturunkan prioritasnya daripada permintaan / tiket pengguna lain.
  • Sistem Operasi: Ubuntu 16.04
  • Versi PHP: 7
  • Versi Laravel: 5.2.0
  • Versi Laravel-Datatables: 6.0.0
question
Sumber
picture faisalhilmi
👀1 👍1

Komentar yang paling membantu

Baris "Satu":

    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')
        );
    }

hati-hati juga dengan ajax yang diperkecil, tambahkan data ajax setelah memanggil metode ini.

picture mgralikowski pada 3 Des 2020
🎉1 👍1

Semua 9 komentar

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

isometriq picture isometriq pada 18 Jun 2017

Namun, saya tidak terlalu suka menggunakan pendekatan berbasis layanan untuk tabel kemudian berbeda untuk yang lain. Agar konsisten, saya ingin tahu cara memisahkan lebih jauh .. mungkinkah membuat struktur seperti itu ?:

UsersDatatableController
secara eksklusif menangani datatable untuk pengguna
tampilan hanya untuk merender datatable dan menangani permintaan ajax

PostsDatatableController
secara eksklusif menangani datatable untuk posting (umum atau terkait dengan pengguna)
tampilan hanya untuk merender datatable dan menangani permintaan ajax

UsersController
Manfaatkan UsersDatatableController dan PostsDatatableController untuk rendering dan tempatkan mereka dalam tampilan yang sama, di tab, over-under, apa pun .. panggilan ajax dari datatables tidak akan ditangani oleh pengontrol ini. Membayangkan pengontrol ini juga bisa untuk bentuk edit daripada halaman normal, dengan datatabel di dalamnya.

Karena kasus penggunaan saya adalah untuk membuat data di sisi server, ingin digabungkan dengan
https://github.com/imanghafoori1/laravel-widgetize
dan ini
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-components-to-build-a-view

@yajra
Biar saya tahu pikiran Anda, terima kasih

isometriq picture isometriq pada 18 Jun 2017

@ isometriq atm, saya rasa Anda tidak dapat menggunakan dua kelas DataTable dalam rute yang sama untuk penanganan ajax secara default. Namun, mungkin Anda dapat menambahkan parameter tambahan yang dapat Anda gunakan untuk mengidentifikasi respons ajax mana yang diminta.

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'));
}

Anda kemudian dapat menggunakan pembangun untuk kedua DT pada tampilan Anda.

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

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

Hanya sebuah ide yang bisa Anda coba jelajahi. Terima kasih!

yajra picture yajra pada 20 Jun 2017
👍2

Terima kasih @yajra, saya akan mencoba beberapa hal

isometriq picture isometriq pada 22 Jun 2017

Terima kasih atas pertanyaan ini. Saya baru saja membuat ini berfungsi seperti yang disarankan @yajra . Untuk orang-orang yang mencoba melakukan hal yang sama dan mendarat di posting ini, file tampilan harus:

{!! $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

Anda harus memasukkan atribut id unik ke setiap tabel sehingga js akan berfungsi dengan baik. Semoga ini membantu seseorang!

Dan di kelas DataTable Anda, Anda meneruskan parameter tambahan dalam metode html ():

public function html() {

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

@yajra , alangkah baiknya jika dokumentasi terbaru di https://datatables.yajrabox.com/services/two-datatables memiliki contoh ini.

benlwong picture benlwong pada 21 Des 2017
👍2

@benlwong terima kasih atas umpan baliknya. Kode sumber demo tersedia di sini . Jika bisa, jangan ragu untuk mengirimkan PR. Terima kasih!

yajra picture yajra pada 22 Des 2017

Hi semua, saya mengikuti solusi pada posting ini dan saya mencapai dua tabel data saya bekerja pada saat yang sama!
Tapi .. Saya tidak ingin keduanya dimuat pada saat yang bersamaan, saat halaman umum sedang dimuat.

Saya ingin itu memuat data data ke-2 ketika saya mengklik tab / tombol tertentu.
Saya melihatnya di halaman: 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']]
        });
    }
}

Itu pada dasarnya terdiri untuk menambahkan pernyataan if yang membungkus JS dari dataTable, tetapi saya ingin solusi melalui implementasi Layanan DataTable, seperti yang Anda lakukan di posting ini. Sesuatu seperti ini:

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

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

    }
}

Tetapi ini tidak dapat dilakukan karena fungsi "scripts ()" mencetak tag

Masalah terkait

SGarridoDev picture SGarridoDev  ·  3Komentar
ahmadbadpey picture ahmadbadpey  ·  3Komentar
techguydev picture techguydev  ·  3Komentar
FilipeBorges1993 picture FilipeBorges1993  ·  3Komentar
t0n1zz picture t0n1zz  ·  3Komentar