Laravel-datatables: 如何在一页的不同选项卡中呈现2个数据表

创建于 2017-06-12 · 9评论 · 资料来源: yajra/laravel-datatables

问题或功能要求摘要

大家好
我想问些事情并需要您的帮助，我创建了具有2个标签的页面，标签#one每天显示数据，标签#two每小时显示数据，我尝试在这两个标签中制作相同的表格，但仅在标签#one中显示，在标签#two中仅显示列名称，为什么会这样？

问题的代码段

我怀疑控制器中有错，这是代码：

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，在调用此方法

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

@yajra
我知道你的想法

isometriq 于 2017-06-18

@isometriq atm，我认为

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

您需要将唯一的id属性传递给每个表，以便js正常运行。希望对大家有帮助！

在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感谢您的反馈。演示源代码在此处。如果可以的话，请不要犹豫提交PR。谢谢！

yajra 于 2017-12-22

大家好，我遵循了本文中的解决方案，并且同时实现了两个数据表！
但是..我不希望在加载常规页面时同时加载两者。

我希望当我单击特定的选项卡/按钮时加载第二个数据表。
我在页面上看到了这一点： 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']]
        });
    }
}

基本上，这就是添加一个if语句来包装数据表的JS，但是我想要一个通过DataTable Service实现的解决方案，就像您在本文中所做的那样。像这样：

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

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

    }
}

但这无法完成，因为函数“ scripts（）”会打印标签