検索と並べ替えの実行方法DataTable

Question

データベースのデータに基づいて動的に生成される行を持つテーブルがあります。私の最初の表には、次のようになります。

<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> 

私はそうのようなテーブルを初期化します。ユーザーは、私に署名されると

$(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 
    }); 
}); 

データベースのデータを持つテーブルを移入：

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

ここで問題となるのは、ページが最初にロードされ、「テーブルで利用可能なデータがありません」という表の行だけです。数秒後に行がフォームDBをテーブルにロードしますが、テーブルで "決して消えませんでした。そして実際に私をここに連れて来て、すべての検索と並べ替えは、テーブルの行が実際にそこにあるhtmlを調べるとデータが表示されていてもデータがないように空になりました。これをどうすれば解決できますか？

ありがとうございます。

Answer 1

データテーブルにajaxを使用してデータを追加すると、jQueryプラグインのデータテーブルではデータが取得されないため、table-bodyではなくテーブル全体をロードする必要があります。