Datatable Buttons - Daten aus eckigen

Question

Ich benutze JQuery Datatables Schaltflächen zum Darstellen der Daten auf meiner Seite (wie es Funktionen für Elemente wie In Zwischenablage kopieren/CSV/Print exportieren. Dann für den Abruf von Daten aus der Server, ich benutze eckige js.

Das Problem ist, dass die Daten aus Winkel ng-Wiederholung gerendert nicht beim Aufruf von Datatable-Tasten wie Kopie/csv/print/etc erscheinen, aber diese Elemente erschien nur gut auf der . Seite aber für die statische Blinddaten, die ich aufgenommen haben, wird es durch die Tasten bearbeitet werden

Nachfolgend finden sie die Code-Schnipsel sind.

Auszug aus Seite:

      <table id="datatable-buttons" class="table table-striped table-bordered ng-cloak"> 
           <thead> 
           <tr> 
            <th>First Name</th> 
            <th>Last Name</th> 
            <th>Job</th> 
            <th>Location</th> 
            <th>Age</th> 
            <th>Date Hired</th> 
            <th>Email</th> 
           </tr> 
           </thead> 
           <tbody> 
           <tr> 
            <td>Donna</td> 
            <td>Snider</td> 
            <td>Customer Support</td> 
            <td>New York</td> 
            <td>27</td> 
            <td>2011/01/25</td> 
            <td>d.snider@datatables.net</td> 
           </tr> 
           <tr ng-repeat="person in persons"> 
            <td>{{person.fname}}</td> 
            <td>{{person.lname}}</td> 
            <td>{{person.job}}</td> 
            <td>{{person.location}}</td> 
            <td>{{person.age}}</td> 
            <td>{{person.date_hired}}</td> 
            <td> 
             <div ng-show="person.email == null">N/A</div> 
             <div ng-show="person.email != null">{{person.email}}</div> 
            </td> 
           </tr> 
           </tbody> 
          </table> 

...

<script> 
    $(document).ready(function() { 
     var handleDataTableButtons = function() { 
      if ($("#datatable-buttons").length) { 
       $("#datatable-buttons").DataTable({ 
        dom: "Bfrtip", 
        buttons: [ 
         { 
          extend: "copy", 
          className: "btn-sm" 
         }, 
         { 
          extend: "csv", 
          className: "btn-sm" 
         }, 
         { 
          extend: "excel", 
          className: "btn-sm" 
         }, 
         { 
          extend: "pdfHtml5", 
          className: "btn-sm" 
         }, 
         { 
          extend: "print", 
          className: "btn-sm" 
         }, 
        ], 
        responsive: true 
       }); 
      } 
     }; 

     TableManageButtons = function() { 
      "use strict"; 
      return { 
       init: function() { 
        handleDataTableButtons(); 
       } 
      }; 
     }(); 

     $('#datatable').dataTable(); 

     $('#datatable-keytable').DataTable({ 
      keys: true 
     }); 

     $('#datatable-responsive').DataTable(); 

//  $('#datatable-scroller').DataTable({ 
//   ajax: "js/datatables/json/scroller-demo.json", 
//   deferRender: true, 
//   scrollY: 380, 
//   scrollCollapse: true, 
//   scroller: true 
//  }); 

     $('#datatable-fixed-header').DataTable({ 
      fixedHeader: true 
     }); 

     var $datatable = $('#datatable-checkbox'); 

     $datatable.dataTable({ 
      'order': [[ 1, 'asc' ]], 
      'columnDefs': [ 
       { orderable: false, targets: [0] } 
      ] 
     }); 
     $datatable.on('draw.dt', function() { 
      $('input').iCheck({ 
       checkboxClass: 'icheckbox_flat-green' 
      }); 
     }); 

     TableManageButtons.init(); 
    }); 
</script> 

Jede Hilfe wäre willkommen. TIA

Answer 1

Der obige Code scheint bis zum Äußersten überkocht :) Warum in aller Welt diese Verrenkungen? Die Mischung aus jQuery und eckig ist generell eine sehr schlechte Idee. Es gibt Rassenprobleme und Sie können sich nicht auf irgendeinen Ihrer $(document).ready 's verlassen. In der Tat wird $(document).ready() mehr oder weniger genau die gleiche Zeit abgefeuert wird als Winkel Pflege seines Geschäfts nehmen wird - wie die Verarbeitung des ng-repeat ‚s ...

Die wirkliche Lösung für Sie wäre, die angular directives for dataTables zu verwenden.

Die kurzfristige Lösung ist die geniale Fluss Readys und Plausibilitätsprüfungen überspringen:

$(document).ready(function() { 
    var handleDataTableButtons = function() { 
     if ($("#datatable-buttons").length) { 
      $("#datatable-buttons").DataTable({ 

Ist nur schlecht Codierung, in einem jQuery Kontext als auch - nichts für ungut, dort gewesen :) Verwenden Sie ein $timeout dass stattdessen sicher, dass die Tabelle in einem späteren initialisiert verdaut, was sein wird, wenn die Tabelle von ng-repeat wiedergegeben wird:

$timeout(function() { 
    $("#datatable-buttons").DataTable({ 
    ... 
    }) 
}) 

arbeiten.