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

这里的问题是，页面首次加载并且表中只有一行表示＆＃34;表中没有可用的数据＆＃34;，几秒后行将DB加载到表中，但是行说＆＃34;表中没有数据＆＃34;永远不会消失。真正让我在这里的是，所有的搜索和排序都是空的，就像没有数据一样，如果你检查html表格的行实际存在，那么即使显示数据也很困难。我该如何解决这个问题？

谢谢。

Answer 1

当您通过数据表中的ajax添加数据时，jQuery插件数据表不会获取数据，因此您将不得不加载整个表而不仅仅是table-body。

如何在动态填充DataTable上执行搜索和排序

1 个答案: