So führen Sie Suche und Sortierung dynamisch befüllen aus DataTable

Question

Ich habe eine Tabelle, die ihre Zeilen basierend auf Datenbankdaten dynamisch generiert hat. Meine erste Tabelle sieht wie folgt aus:

<table id="tabela-campistas" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
    <thead> 
     <tr> 
     <th>N&#186; Ficha</th> 
     <th class="mdl-data-table__cell--non-numeric">Nome</th> 
     <th>Email</th> 
     <th>Telefone</th> 
     <th>Camiseta</th> 
     <th>Especial</th> 
     <th>Check In</th> 
     <th>Tribo</th> 
     <th>Editar</th> 
     </tr> 
    </thead> 
    <tbody id="campistas-table-body"> 
     </tbody> 
</table> 

ich die Tabelle wie so initialisiert werden:

$(document).ready(function() { 
     // datatable 
    $('#tabela-campistas').DataTable({ 
     language: { 
      search: "_INPUT_", 
      searchPlaceholder: "Buscar ..." 
     }, 
     "paging": false, 
     "info": false, 
     "columns": [ 
     { responsivePriority: 1 }, 
     { responsivePriority: 2 }, 
     { responsivePriority: 5 }, 
     { responsivePriority: 6 }, 
     { responsivePriority: 8 }, 
     { responsivePriority: 7 }, 
     { responsivePriority: 4 }, 
     { responsivePriority: 3 }, 
     { "orderable": false, 
     responsivePriority: 9 
     } 
    ], 
    responsive: true 
    }); 
}); 

Sobald der Benutzer angemeldet ist in I die Tabelle mit Daten in der Datenbank zu füllen:

var campistasRef = firebase.database().ref('fac-2/campistas/'); 
campistasRef.on('child_added', function(data) { 
    populateTable(data); 
}); 

function populateTable(data){ 
    var veganIcon = '<td><p>especial-nao</p><i class="fa fa-times-circle-o fa-lg" aria-hidden="true"></i></td>'; 
    var checkInIcon = '<td><p>nao-checkin</p><i class="fa fa-times-circle-o fa-lg" aria-hidden="true"></i></td>'; 

    if (data.val().vegan) { 
    veganIcon = '<td><p>especial-sim</p><i class="fa fa-check-circle-o fa-lg" aria-hidden="true"></i></td>'; 
    } 

    if (data.val().checkin) { 
    checkInIcon = '<td><p>sim-checkin</p><i class="fa fa-times-circle-o fa-lg" aria-hidden="true"></i></td>'; 
    } 

    var triboIcon = '<td><p>sem-tribo</p><i class="fa fa-circle-o fa-lg" aria-hidden="true"></i>'; 
    var tribo = data.val().team; 
    var color = 'style="color: green"'; 

    if (tribo != 'NENHUM') { 
    if (tribo === 'amarela') { 
     color = 'style="color: yellow"'; 
    } else if (tribo === 'azul') { 
     color = 'style="color: blue"'; 
    } else if (tribo === 'verde') { 
     color = 'style="color: green"'; 
    } else if (tribo === 'vermelha') { 
     color = 'style="color: red"'; 
    } else if (tribo === 'laranja') { 
     color = 'style="color: rgb(255, 140, 0)"'; 
    } else if (tribo === 'marrom') { 
     color = 'style="color: brown"'; 
    } else if (tribo === 'preta') { 
     color = 'style="color: black"'; 
    } else { 
     color = 'style="color: purple"'; 
    } 

    triboIcon = '<td><p>sem-tribo</p><i class="fa fa-circle fa-lg" aria-hidden="true"'+color+'></i>'; 

    } 

    $("#campistas-table-body").append('<tr><td>'+data.val().number+'</td><td class="mdl-data-table__cell--non-numeric">'+data.val().username+'</td><td>'+data.val().email+'</td><td>'+data.val().phone+'</td><td>'+data.val().size.toUpperCase()+'</td><'+veganIcon+checkInIcon+triboIcon+'</td><td class="edit-td"><i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></i></td></tr>'); 
} 

Die Problem hier ist, die Seite zuerst laden und es gibt nur Zeile in der Tabelle sagen "Keine Daten in der Tabelle verfügbar", nach ein paar Sekunden laden die Zeilen Formular DB in die Tabelle, aber diese erste Zeile sagt "Keine Daten verfügbar in der Tabelle "nie verschwunden. Und was mich wirklich hierher bringt, alle Suchen und Sortierungen sind leer ausgegangen, da dort keine Daten vorhanden sind, selbst wenn die Daten nicht angezeigt werden, wenn man den HTML-Code prüft, wo die Tabellenzeilen tatsächlich vorhanden sind. Wie kann ich das beheben?

Vielen Dank.

Answer 1

Wenn Sie Daten über Ajax in Datentabelle hinzufügen, erhält die jQuery-Plugin-Datentabelle die Daten nicht, sodass Sie eine ganze Tabelle statt nur table-body laden müssen.