通过插入带有 jQuery 的行更新 DataTables-1.9.1 table 时出错

Question

我有一个 table，我想向它们插入我查询的行，当我插入新行时，table 没有更新，并显示有 0条目，当我看到是否添加了新行时。此外，当我使用 table 上的搜索字段时，行会消失。未在 table 中插入以加载页面的行，如果执行函数则插入它们。

    function build_table(valor){

         var objTabla = $("#tabla");
         var strNueva_Fila='<tr>'+
                '<td align="center"><img  class ="avatar1" src='+valor[0]+'></td>'+
                '<td>'+valor[1]+'</td>'+
                '<td>'+valor[2]+'</td>'+
                '<td >'+valor[3]+'</td>'+
                '<td >'+valor[4]+'</td>'+
                '<td >'+valor[5]+'</td>'+
                '<td >'+valor[5]+'</td>'+
                '<td >'+valor[5]+'</td>'+
            '</tr>';

    $(objTabla).find('tbody').append(strNueva_Fila);

    }


<table id ="tabla" >
    <thead>
        <th>Foto</th>
        <th>Nombre(s)</th>
        <th>Apellidos</th>
        <th>Usuario</th>
        <th>Solap&iacute;n</th>     
        <th>Mostrar</th>
        <th>Editar</th>
        <th>Eliminar</th>
    </thead>
    <tbody> 
    </tbody>
</table>

英语

这是要插入行的table图片

当您使用搜索选项时会发生这种情况

Answer 1

在 dataTables 1.9.x 您必须使用内置 fnAddData 函数才能在活动的 dataTables 实例中插入新行。

使用 <instance>.fnAddData() 或 $("#tabla").dataTable().fnAddData()。您的代码应如下所示。

$("#tabla").dataTable().fnAddData([
   '<img class ="avatar1" src='+valor[0]+'>',
   valor[1],
   valor[2],
   valor[3],
   valor[4],
   valor[5]
]);

在此处查看 fnAddData 的演示 -> http://jsfiddle.net/tnb0s4fc/

原因是 dataTables 正在构建一个内部行列表，它在显示 table、排序、搜索等时使用它。当使用 jQuery 或 javascript 时插入新的 <tr>，新的 <tr> 将显示在 table 中，但 dataTables 不知道它 - 然后一旦用户单击它就会消失列 header 或 table 出于任何原因被重新绘制。

通过插入带有 jQuery 的行更新 DataTables-1.9.1 table 时出错

Error updating DataTables-1.9.1 table by inserting rows with jQuery

jquery

datatables

jquery-datatables