こんにちは、こんにちは。
何か質問したいのですが、助けが必要です。2つのタブがあるページを作成しました。タブ#1は1日あたりのデータを表示し、タブ#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: </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>
ただし、テーブルにサービスベースのアプローチを使用してから別のテーブルに異なるアプローチを使用することはあまり好きではありません。 一貫性を保つために、さらに分離する方法を知りたいです..そのような構造を作成することは可能ですか?:
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
@yajra
Lemmeはあなたの考えを知っていますthx
@isometriq atm、デフォルトでは、同じルート内で2つのDataTableクラスをajax処理に使用することはできないと思います。 ただし、要求されている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私はいくつかのことを試してみます
この質問をありがとう。 @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フィードバックをありがとう。 デモのソースコードはこちらから入手でき
みなさん、こんにちは。私はこの投稿の解決策に従い、2つのデータテーブルが同時に機能することを達成しました。
しかし..一般的なページがロードされているときに、両方が同時にロードされることは望ましくありません。
特定のタブ/ボタンをクリックしたときに2番目のデータテーブルをロードしたい。
私はそれをページで見ました: https :
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ステートメントを追加することで構成されていますが、この投稿で行っていたように、DataTableServiceの実装によるソリューションが必要です。 このようなもの:
function postsDataTables() {
if (!$.fn.dataTable.isDataTable('#postsTable')) {
{!! $secondDataTable->html()->scripts() !!}
}
}
ただし、関数「scripts()」がタグを出力するため、これは実行できません。 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
私はあなたの提案を使おうとしましたが、エラーMethod Yajra\DataTables\Html\Builder::html does not exist.
。 私は何か見落としてますか? @benlwong
"一発ギャグ:
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データ
最も参考になるコメント
"一発ギャグ:
また、縮小されたajaxに注意し、このメソッドを呼び出した後にajaxデータ