通过使用jQuery插入行来更新DataTables-1.9.1表时出错

Question

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

    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>

英语

这是要插入行的表的图片

当您使用选项搜索

时会发生这种情况

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演示 - ＆gt;的 http://jsfiddle.net/tnb0s4fc/

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