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?
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: </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: </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>
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 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!
Terima kasih @yajra, saya akan mencoba beberapa hal
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 terima kasih atas umpan baliknya. Kode sumber demo tersedia di sini . Jika bisa, jangan ragu untuk mengirimkan PR. Terima kasih!
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 itself.
I don't know if what I'm asking is very easy to solve, or I'll have to write manually the JavaScript of the datatable and dispense DataTable Service in the second table.
Thanks for your attention. @yajra
Saya telah mencoba menggunakan saran Anda tetapi saya mendapat kesalahan Method Yajra\DataTables\Html\Builder::html does not exist.
. Apakah saya melewatkan sesuatu? @benlong
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.
Komentar yang paling membantu
Baris "Satu":
hati-hati juga dengan ajax yang diperkecil, tambahkan data ajax setelah memanggil metode ini.