Searching and sorting doesn't work for dynamically generated tables.

alekrabbe

Hello,

I have a table that has it`s rows dynamically generated based on database data. My initial table looks like this:

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

I initialize the table like so:

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

Once the user is signed in I populate the table with database data:

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

The problem here is, the page first load and there is only row in the table saying "No data available in table", after a few second the rows load form DB into the table, however that first row saying "No data available in table" never disappeared. And what really brings me here, all searches and sorting came out empty like there is no data there even tough the data is being displayed if you inspect the html the table rows are actually there. How can I fix this?

Thank you.