Jquery Datatable gibt Fehler beim Neuerstellen der Datentabelle: TypeError: t [c] ist undefined

Question

Ich habe eine Funktion, die eine Datentabelle erstellt. Beim Laden der Seite wird die Datentabelle erstellt und gezeichnet. Wenn ich jetzt ein Formular einreiche, um eine Suche in einer Tabelle durchzuführen, rufe ich dieselbe Funktion auf. Zuerst mache ich eine Instanz der Datentabelle, ich rufe die Clear-Funktion auf, dann rufe ich die Funktion auf, um sie neu zu erstellen.

Hier ist, wie ich die Datentabelle zum ersten Mal erstellen, die ganz gut funktioniert:

$(window).load(function() { 


     var table = UpdateTableCompany(null, null); 
     ..... 

Hier ist die Funktion, die die Datentabelle verwaltet:

function UpdateTableCompany(val, search_field) 
{ 
    $('#tablePubDev').DataTable().clear(); 
    var table = $('#tablePubDev').DataTable({ 
     destroy: true, 
     searching: false, 
     "lengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]], 
     "pageLength": 5, 
     "columnDefs": [ 
      { 
       "render": function (data, type, row) { 


        var text = '<div class="form-group">' + 
          '<div class="checkbox-nice center" style="cursor: default; height:100px;">' + 
          '<img src="/application/assets/img/pub_devs/logos/' + row['c']['logo'] + '" style="max-height:100%; max-width: 100%;"/>' + 
          '</div>' + 
          '<div class="checkbox-nice text-center" style="cursor: default">' + 
          '<strong >Id: ' + pad(data, 11) + '</strong>' + 
          '</label>' + 
          '</div>' + 
          '</div>'; 


        return text; 
       }, 
       "targets": 0, 
      }, 
      { 
       "render": function (data, type, row) { 


        var text = '<div class="form-group">' + 
          '<div class="checkbox-nice center" style="cursor: default; height:100px;"><p class="center" style="font-size: 150%; font-weight: bold;">' + 
          row['c']['descr'] + 
          '</p></div>' + 
          '</div>'; 


        return text; 
       }, 
       "targets": 1, 
      }, 
      { 
       "render": function (data, type, row) { 

        var add_text1 = ''; 
        var checked1 = ''; 
        var add_text2 = ''; 
        var checked2 = ''; 

        if (data != null && data > 0) { 

         checked1 += 'checked="checked"'; 
        } else 
         add_text1 += 'buttonDisabled '; 

        if (row['c']['developer'] != null && row['c']['developer'] > 0) { 

         checked2 += 'checked="checked"'; 
        } else 
         add_text2 += 'buttonDisabled '; 


        var text = '<div class="form-group">' + 
          '<div class="checkbox-nice ' + add_text1 + '" style="cursor: default">' + 
          '<input type="checkbox" ' + checked1 + ' disabled="disabled" id="checkbox-1">' + 
          '<label for="checkbox-1">' + 
          'Publisher ' + 
          '</label>' + 
          '</div>' + 
          '<div class="checkbox-nice ' + add_text2 + '" style="cursor: default">' + 
          '<input type="checkbox" id="checkbox-2" ' + checked2 + ' disabled="disabled">' + 
          '<label for="checkbox-2">' + 
          'Developer' + 
          '</label>' + 
          '</div>' + 
          '</div>'; 


        return text; 
       }, 
       "targets": 3, 
      }, 
      { 
       "render": function (data, type, row) { 
        var text = '<td style="width: 20%;">' + 
          //'<a href="#" class="table-link">' + 
          //'<span class="fa-stack">' + 
          //'<i class="fa fa-square fa-stack-2x"></i>' + 
          //'<i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>' + 
          //'</span>' + 
          //'</a>' + 
          '<a href="#" class="table-link updatePubDev" data-modal="modal-11">' + 
          '<span class="fa-stack">' + 
          '<i class="fa fa-square fa-stack-2x"></i>' + 
          '<i class="fa fa-pencil fa-stack-1x fa-inverse"></i>' + 
          '</span>' + 
          '</a>' + 
          '<span class="fa-stack table-link danger deletePubDev">' + 
          '<i class="fa fa-square fa-stack-2x"></i>' + 
          '<i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>' + 
          '</span>' + 
          '</td>'; 


        return text; 
       }, 
       "targets": 4, 
      } 
     ], 
     "columns": [ 
      {"data": "c.idpubdev", "name": "c.idpubdev"}, 
      {"data": "c.descr", "name": "c.descr"}, 
      {"data": "c.date_founded", "name": "c.date_founded"}, 
      {"data": "c.publisher", "name": "c.publisher"}, 
      {"data": "c.date_founded", "name": "c.date_founded"}, 
      {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false}, 
      {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false}, 

     ], 
     "order": [[0, false], [1, 'asc'], [2, 'asc'], [3, 'asc']], 

     "displayLength": 3, 
     serverSide: true, 
     "ajax": 
       { 
        "url": "/pubdev/search/", 
        "type": "POST", 
        "data": function (d) { 
         if (val) 
          d.val = val; 
         if (search_field) 
          d.search_field = search_field; 
        } 

       }, 
     error: function (request, status, error) { 
      alert('Unable to update table contents'); 
      console.log(request); 
      console.log(status); 
      console.log(error); 
     }, 

    }); 

    return table; 
} 

Hier wird stattdessen das Eintragen von das Formular, das die Suchfunktion ausführt:

$("#search_form").submit(function (e) { 
      e.preventDefault(); 

      var search_key = $.trim($('#val').val()); 
      var search_field = 'c.descr like '; 

      table = $('#tablePubDev').DataTable(); 

      table.clear(); 

      table = UpdateTableCompany(search_field, search_key); 

     }); 

Ich verwende derzeit das minimierte Format von jquery Version v1.10.2 Die Version von Datatable ist 1.10.4

Dies ist der Fehler ich in der Konsole

Ich habe versucht, ein Experiment zu bekommen: Ich habe nicht laden Sie die Datentabelle in dem Dokument bereit, so Ich habe eine Suche durchgeführt, um die Datentabelle zu laden, und es hat funktioniert! Natürlich, wenn ich eine zweite Suche mache, dann tritt derselbe Fehler auf, also hat das Problem mit der Wiederherstellung der Datentabelle zu tun. Der gesamte Back-End-Code (php) funktioniert korrekt und liefert die gewünschten Ergebnisse. Hier

ist die Tabelle in html

<div class="main-box no-header clearfix"> 
 
        <div class="main-box-body clearfix"> 
 
         <div class="table-responsive"> 
 
          <table id="tablePubDev" class="table user-list table-hover"> 
 
           <thead> 
 
            <tr> 
 
             <th>Company</th> 
 
             <th>Name</th> 
 
             <th><span>Listed Games</th> 
 
             <th>Type</th> 
 
             <th>Actions</th> 
 
            </tr> 
 
           </thead> 
 
           <tbody> 
 

 
           </tbody> 
 
          </table> 
 
         </div> 
 
        </div> 
 
       </div>

ich versucht habe, mit der unminified Version von Datatable (v 1.10.12) und ich habe immer noch und Fehler, aber jetzt sagt, es sein:

TypeError: headerCells[i] is undefined

headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !==... 

// Clone the table header and footer - we can't use the header/footer 
     // from the cloned table, since if scrolling is active, the table's 
     // real header and footer are contained in different table tags 
     tmpTable.find('thead, tfoot').remove(); 
     tmpTable 
      .append($(oSettings.nTHead).clone()) 
      .append($(oSettings.nTFoot).clone()); 

     // Remove any assigned widths from the footer (from scrolling) 
     tmpTable.find('tfoot th, tfoot td').css('width', ''); 

     // Apply custom sizing to the cloned header 
     **headerCells = _fnGetUniqueThs(oSettings, tmpTable.find('thead')[0]**); <-- This is where the error occurs <-- 

     for (i=0 ; i<visibleColumns.length ; i++) { 
      column = columns[ visibleColumns[i] ]; 

      headerCells[i].style.width = column.sWidthOrig !== null && column.sWidthOrig !== '' ? 
       _fnStringToCss(column.sWidthOrig) : 
       ''; 

      // For scrollX we need to force the column width otherwise the 
      // browser will collapse it. If this width is smaller than the 
      // width the column requires, then it will have no effect 
      if (column.sWidthOrig && scrollX) { 
       $(headerCells[i]).append($('<div/>').css({ 
        width: column.sWidthOrig, 
        margin: 0, 
        padding: 0, 
        border: 0, 
        height: 1 
       })); 
      } 
     } 

     // Find the widest cell for each column and put it 

UPDATE:

Ich denke, ich weiß, warum das passiert, obwohl ich noch eine Lösung dafür finden muss. Es passiert einfach so, dass wenn ich meine Spalten in der Datentabelle Instanziierung definieren:

"columns": [ 
      {"data": "c.idpubdev", "name": "c.idpubdev"}, 
      {"data": "c.descr", "name": "c.descr"}, 
      {"data": "c.date_founded", "name": "c.date_founded"}, 
      {"data": "c.publisher", "name": "c.publisher"}, 
      {"data": "c.date_founded", "name": "c.date_founded"}, 
      {"data": "c.developer", "name": "c.developer", "visible": false, "searchable": false}, 
      {"data": "c.logo", "name": "c.logo", "visible": false, "searchable": false}, 

Diese genau so viele wie die Tabellenköpfe sein müssen, die ich in meinem HTML-Seite enthalten

      <thead> 
 
            <tr> 
 
             <th>Company</th> 
 
             <th>Name</th> 
 
             <th><span>Listed Games</th> 
 
             <th>Type</th> 
 
             <th>Actions</th> 
 
            </tr> 
 
           </thead>

In diesem Fall habe ich 5 Tabellenköpfen und 7 Datenspalte Definitionen (zwei haben sichtbar = falsch). Wenn ich sie in einem älteren Projekt verwendete, musste ich lediglich die "visible" -Eigenschaft auf "false" setzen, damit sie keinem Tabellenkopf zugeordnet werden, aber hier scheint es nicht zu funktionieren ... Warum? denkst du, dass das passieren würde? Ich habe einen Weg, um es zu umgehen?

Answer 1

Ok, ich habe dieses Problem gelöst! Es gibt also einen Bug (Feature ??) im datatable.js Plugin. Wenn versucht wird, die Spalten automatisch zu vergrößern, müssen so viele Header vorhanden sein, wie Datenspalten definiert sind. Wenn Sie also 7 Spaltendefinitionen haben und nur 5 Kopfzeilen definiert sind, wird der Code mit einer Nullzeigerausnahme fehlschlagen. Eine Möglichkeit, dies zu umgehen, besteht darin, den Parameter autowidth auf false zu setzen (standardmäßig ist dies der Fall).

function UpdateTableCompany(val, search_field) 
 
    { 
 

 
     var table = $('#tablePubDev').DataTable({ 
 
      'destroy': true, 
 
      searching: false, 
 
      'info': false, 
 
      paging: true, 
 
      retrieve: false, 
 
      processing: true, 
 
      "autoWidth": false, // This parameter must be set to false 
 
      ......

Dadurch verhindern Sie den Anruf an die functon vermeiden, die tatsächlich die AUTOBREITE zu tun versucht. Indem Sie diesen Teil des Datatable-Codes vermeiden, haben Sie den beschriebenen Fehler nicht.

Answer 2

Anstatt die Tabelle jedes Mal neu zu erstellen, wenn Sie auf #search_form button, klicken, sollten Sie nur die Tabellen-Datenquelle neu laden.Versuchen Sie Folgendes:

Zuerst, lassen Sie uns Ihre Funktion ein wenig ändern, so wird es nicht verwendet, um Ihre Tabelle zu aktualisieren, sondern um es zu erstellen (es wird nur einmal aufgerufen). die Suchparameter entfernen wie folgt:

von function UpdateTableCompany(val, search_field)

-function UpdateTableCompany()

Sie können Ihre Funktion als auch umbenennen:

function CreateTableCompany() { 
... 

Nun In Ihrem "Ajax" -Funktion, Ändern Sie die Art, wie Sie die Werte erhalten. Machen Sie es, die Werte erhalten dinamically, so etwas wie:

d.val = $('#val').val().trim(); 
d.search_field = $('#search_field').val().trim(); 

Jetzt müssen Sie Ihre table Variable außerhalb des Last Bereich erstellen, so kann es von anderen Funktionen aufgerufen werden:

var table; 
$(window).load(function() { 
    table = CreateTableCompany(); 
... 

Schließlich , entfernen Sie den Inhalt der senden Funktion (mit Ausnahme der e.preventDefault();)

Es sollte aussehen wie folgt:

$("#search_form").submit(function (e) { 
    e.preventDefault(); 
    table.ajax.reload(); 
}); 

Ich denke, das wird den Trick tun. Ich hoffe, es hilft.