Laravel-datatables: Comment rendre 2 datatable dans une page différents onglets

Créé le 12 juin 2017 · 9Commentaires · Source: yajra/laravel-datatables

Résumé du problème ou de la demande de fonctionnalité

Salut, bonne journée à toi.
Je veux demander quelque chose et j'ai besoin de votre aide, j'ai créé une page qui avait 2 onglets, l'onglet #one affiche des données par jour, l'onglet #two affiche des données par heure, j'essaie de créer le même tableau dans ces deux onglets, mais c'est seulement affiché dans l'onglet #one, dans l'onglet #two affichant uniquement le nom de la colonne, pourquoi cela se produit-il?

Extrait de code du problème

Je soupçonne que la mauvaise chose est dans mon contrôleur, voici le code:

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

donc je veux demander comment rendre plusieurs datatable dans le contrôleur.
Merci.
Oh et c'est le code dans mon 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>

Détails du système

Veuillez inclure ces détails sur votre système! S'ils sont omis, le ticket sera dépriorisé par rapport aux demandes / tickets des autres utilisateurs.

Système d'exploitation: Ubuntu 16.04
Version PHP: 7
Version de Laravel: 5.2
Version Laravel-Datatables: 6.0

question

Source

faisalhilmi

👀1 👍1

Commentaire le plus utile

"Bon mot:

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

faites également attention à l'ajax minifié, ajoutez des données ajax après avoir appelé cette méthode.

mgralikowski le 3 déc. 2020

🎉1 👍1

Tous les 9 commentaires

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

isometriq le 18 juin 2017

Cependant, je n'aime pas beaucoup utiliser une approche basée sur les services pour une table puis différente pour une autre. Par souci de cohérence, j'aimerais savoir comment séparer encore plus ... est-il possible de créer une telle structure?:

UtilisateursDatatableController
s'occupe exclusivement de la datatable pour les utilisateurs
la vue sert uniquement à rendre la datatable et à gérer la requête ajax

MessagesDatatableController
s'occupe exclusivement de la datatable pour les messages (généraux ou liés aux utilisateurs)
la vue sert uniquement à rendre la datatable et à gérer la requête ajax

UsersController
Utilisez UsersDatatableController et PostsDatatableController pour le rendu et placez-les dans la même vue, dans des onglets, sur-dessous, peu importe .. les appels ajax des tables de données ne seraient pas gérés par ce contrôleur. Envisager ce contrôleur pourrait aussi être pour un formulaire d'édition au lieu d'une page normale, avec un datatable à l'intérieur.

Étant donné que mon cas d'utilisation est de rendre datable côté serveur, je cherche à combiner avec
https://github.com/imanghafoori1/laravel-widgetize
et ça
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-components-to-build-a-view

@yajra
Laisse-moi connaître tes pensées, merci

isometriq le 18 juin 2017

@isometriq atm, je pense que vous ne pouvez pas utiliser deux classes DataTable dans la même route pour la gestion ajax par défaut. Cependant, vous pouvez peut-être ajouter des paramètres supplémentaires que vous pouvez utiliser pour identifier la réponse ajax demandée.

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

Vous pouvez ensuite utiliser le générateur pour les deux DT sur votre vue.

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

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

Juste une idée que vous pouvez essayer d'explorer. Merci!

yajra le 20 juin 2017

👍2

Merci @yajra, je vais essayer quelques choses

isometriq le 22 juin 2017

Merci pour cette question. Je viens de faire fonctionner cela comme @yajra l'a suggéré. Pour les personnes qui essaient de faire la même chose et qui ont atterri sur ce message, le fichier de vue doit être:

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

Vous devez transmettre un attribut id unique à chaque table pour que le js fonctionne correctement. J'espère que cela aidera quelqu'un!

Et dans votre classe DataTable, vous avez passé le paramètre supplémentaire dans la méthode html ():

public function html() {

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

@yajra , ce serait bien si la dernière documentation sur https://datatables.yajrabox.com/services/two-datatables avait cet exemple à la place.

benlwong le 21 déc. 2017

👍2

@benlwong merci pour les commentaires. Le code source de la démo est disponible ici . Si vous le pouvez, n'hésitez pas à soumettre un PR. Merci!

yajra le 22 déc. 2017

Salut à tous, j'ai suivi la solution sur ce post et j'ai réalisé mes deux datatables fonctionnant en même temps!
Mais .. je ne veux pas que les deux soient chargés en même temps, lorsque la page générale est en cours de chargement.

Je veux que cela charge le 2ème datatable lorsque je clique sur un onglet / bouton spécifique.
J'ai vu cela dans la page: 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']]
        });
    }
}

Cela consiste essentiellement à ajouter une instruction if enveloppant le JS de datatable, mais je veux une solution via l'implémentation de DataTable Service, comme vous le faisiez dans cet article. Quelque chose comme ça:

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

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

    }
}

Mais cela ne peut pas être fait car la fonction "scripts ()" imprime les balises

Questions connexes

Valeur de colonne d'ID incorrecte

shadoWalker89 · 3Commentaires

Rendre le tableau réactif

techguydev · 3Commentaires

jeu de résultats vide yajra datatable sur de grandes tables

ahmadbadpey · 3Commentaires

Comment exclure une colonne de l'exportation

kamrava · 3Commentaires

le filtre des tables de données ne fonctionne pas

t0n1zz · 3Commentaires