¿Cómo puedo pasar una fila de tabla html en DataTable.net fnAddData

Question

Estoy usando el complemento DataTable.net y me pregunto cómo puedo agregar dinámicamente una fila a una tabla existente?

http://datatables.net/examples/api/add_row.html

Estoy buscando en este ejemplo y lo tienen como esto

/* Global variable for the DataTables object */ 
var oTable; 

/* Global var for counter */ 
var giCount = 2; 

$(document).ready(function() { 
    oTable = $('#example').dataTable(); 
}); 

function fnClickAddRow() { 
    oTable.fnAddData([ 
     giCount+".1", 
     giCount+".2", 
     giCount+".3", 
     giCount+".4" ]); 

    giCount++; 
} 

pero me pregunto qué pasa si quiero tengo una fila de la tabla ya rendido?

Di que esta es mi mesa.

<table border="1"> 
<tr> 
<td>row 1, cell 1</td> 
<td>row 1, cell 2</td> 
</tr> 
<tr> 
<td>row 2, cell 1</td> 
<td>row 2, cell 2</td> 
</tr> 
</table> 

Ahora tengo unas pocas cosas

var newRow = '<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>'; 

¿Cómo puedo agregarlo a través addRow?

Intenté oTable.fnAddData(newRow); pero eso parece no funcionar.

Así que no estoy seguro de cómo hacer esto.

Answer 1

Llame al fnAddData con una matriz de los valores que desee añadir, como esto:

oTable.fnAddData(["row 3, cell 1", "row 3, cell 2"]); 

partir de la versión 1.10 uso row.add() método descrito por @froilanq

You can read more details from the API here, aquí es los argumentos que se necesita:

1. cadenas de matriz: los datos que se agregarán a la tabla. Esta matriz debe ser de la misma longitud que la cantidad de columnas en la tabla HTML original.
   o
   series de matriz de matriz: serie 2D de datos que se agregarán a la tabla. La matriz interna debe ser de la misma longitud que la cantidad de columnas en la tabla HTML original.
2. booleano: opcional - redibujar la mesa o no después de la adición de los nuevos datos (por defecto cierto)

Answer 2

Si todavía tiene este problema, echar un vistazo a las tablas de datos plug-in fnAddTr.

Creo que puede resolver sus problemas.

Answer 3

jQuery DataTables 1.10 le permite hacer esto de forma nativa sin la necesidad de un complemento.Coge la rama más reciente desarrollo aquí: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

Aquí hay un código de ejemplo de cómo se usa:

$(document).ready(function() { 
    var t1 = $('#t1').DataTable(); 
    var t2 = $('#t2').DataTable(); 

    $('#t1 tbody').on('click', 'tr', function() { 
    t1.row(this).remove().draw(); 
    t2.row.add(this).draw(); 
    }); 

    $('#t2 tbody').on('click', 'tr', function() { 
    t2.row(this).remove().draw(); 
    t1.row.add(this).draw(); 
    }); 
}); 

Referencia: http://www.datatables.net/forums/discussion/comment/52595#Comment_52595

Más información

Nota a la llamada anterior es DataTable() y no dataTable(). Si el objeto es dataTable() acceder a ella de la siguiente manera:

t1 = $('#t1').dataTable(); 
t1.DataTable().row.add(this).draw(); 

Answer 4

Resuelto simple:

var newRow = "<tr><td>row 3, cell 1</td><td>row 3, cell 2</td></tr>"; 
var table = $('table').DataTable(); 
table.row.add($(newRow)).draw(); 

Answer 5

Hola mis amigos: este código funcionó bien para mí.

var oTable = $('#datatable').dataTable(); 
var api = oTable.api(true); 
var newRow = { 
       colName1: '', 
       colName2: 0, 
       colName3: 0, 
       colName4: 0 
      }; 
api.row.add(newRow).draw(); 

buena suerte.

Answer 6

var dataTable = $('.table').DataTable(); 

// get the html table rows then 
dataTable.destroy(); 

$("tbody").empty().promise().done(function(){ 
    $("tbody").html(data); 
    dataTable = $(".table").DataTable(); 
}); 

Esto funciona si desea aplicar toda la fila html si tiene como CSS en línea o etiquetas HTML adicionales dentro de las divisiones de la tabla.