Come posso passare una riga della tabella html in DataTable.net fnAddData

Question

Sto usando il plug-in DataTable.net e mi chiedo come posso aggiungere dinamicamente una riga a una tabella esistente?

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

sto guardando questo esempio e hanno in questo modo

/* 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++; 
} 

ma mi chiedo che cosa succede se voglio ho una riga della tabella già reso?

Dire che questo è il mio tavolo.

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

Ora ho questo

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

Come posso aggiungere attraverso addRow?

Ho provato oTable.fnAddData(newRow); ma sembra non funzionare.

Quindi non sono sicuro di come farlo.

Answer 1

Chiamare il fnAddData con una serie di valori che si desidera aggiungere, in questo modo:

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

Dalla versione 1.10 uso row.add() metodo descritto da @froilanq

You can read more details from the API here, ecco gli argomenti che ci vuole:

1. stringhe di array: i dati da aggiungere alla tabella. Questa matrice deve essere della stessa lunghezza del numero di colonne sulla tabella HTML originale.
   o
   stringhe di array di array: matrice 2D di dati da aggiungere alla tabella. L'array interno deve essere della stessa lunghezza del numero di colonne sulla tabella HTML originale.
2. booleano: optional - ridisegnare la tavola o meno dopo aver aggiunto i nuovi dati (default true)

Answer 2

Se avete ancora questo problema, date un'occhiata alle DataTable plug-in fnAddTr.

Penso che possa risolvere i tuoi problemi.

Answer 3

jQuery DataTables 1.10 consente di farlo in modo nativo senza la necessità di un plug-in.Afferra il ramo di sviluppo più recente qui: https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

Ecco alcuni esempi di codice su come usarlo:

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

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

Ulteriori informazioni

Nota la chiamata sopra è DataTable() e non dataTable(). Se il vostro obiettivo è dataTable() accedere come segue:

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

Answer 4

Risolto semplice:

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

hi miei amici: questo codice ha funzionato bene per me.

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

buona fortuna.

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

Questo funziona se si desidera applicare l'intera riga HTML se avete come css inline o tag HTML aggiuntivi all'interno delle divisioni di tabella.