8
Ho bisogno di cambiare totalmente il contenuto di un datatable, facendolo da una prospettiva javascript. Non con qualsiasi chiamata Ajax o così come ho letto molte volte. Effettivamente fare il seguente script e cambiare il contenuto della tabella farà il trucco.jquery.dataTables: come modificare i dati totalmente contenuti/aaData?
ho pensato che posso usare il:
oTable.fnClearTable();
oTable.fnAddData(R);
oTable.fnAdjustColumnSizing();
ma non funzionano.
e ottengo:
DataTables warning (table id = 'example'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy
qui è uno script di esempio:
<html>
<head>
<!--
<script type="text/javascript" src="ressources/json2.js"></script>
<script type="text/javascript" src="ressources/jsonwspclient.js"></script>
-->
<script type="text/javascript" src="ressources/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict(); // absolutely needed for others json libaries... so i use jQuery instead of $
</script>
<script type="text/javascript" language="javascript" src="ressources/jquery.dataTables.js"></script>
<script type="text/javascript">
function s1()
{
var R = [
{"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":71},
{"col0":"resultForCol0","co11WithFloatingValue":0.9523809523809523,"col2":"bbb","col3WithInt":40},
{"col0":"resultForCol0","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc","col3WithInt":19},
{"col0":"resultForCol0","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dd","col3WithInt":10},
{"col0":"resultForCol0","co11WithFloatingValue":0.7159975101151571,"col2":"eee","col3WithInt":14}
];
alert(JSON.stringify(R));
var oTable = jQuery('#example').dataTable({
"aaData": R,
"aoColumns": [
{ "mData": "col0" },
{ "mData": "co11WithFloatingValue" },
{ "mData": "col2" },
{ "mData": "col3WithInt" },
]
});
}
function s2()
{
var R = [
{"col0":"new","co11WithFloatingValue":0.9523809523809523,"col2":"aåaa_utf8","col3WithInt":51},
{"col0":"other","co11WithFloatingValue":0.9523809523809523,"col2":"bbb bbbbb bbb bbb","col3WithInt":42},
{"col0":"whatever","co11WithFloatingValue":0.7830687830687831,"col2":"c'ccc cccc ","col3WithInt":14},
{"col0":"changed","co11WithFloatingValue":0.7167011732229124,"col2":"dd dd dddddd ","col3WithInt":20},
{"col0":"here","co11WithFloatingValue":0.7159975101151571,"col2":"eee eee e eeee ","col3WithInt":15},
{"col0":"more","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeeeeeeee","col3WithInt":18},
{"col0":"again","co11WithFloatingValue":0.7159975101151571,"col2":"eeeeeee","col3WithInt":16}
];
alert(JSON.stringify(R));
if(typeof oTable === 'undefined')
{
// oTable.fnClearTable(); // can this be used?
var oTable = jQuery('#example').dataTable({
"aaData": R,
"aoColumns": [
{ "mData": "col0" },
{ "mData": "co11WithFloatingValue" },
{ "mData": "col2" },
{ "mData": "col3WithInt" },
]
});
}
else {
// how to change the data contained inside datatable?
oTable.fnClearTable();
oTable.fnAddData(R);
oTable.fnAdjustColumnSizing();
}
}
</script>
</head>
<body style="text-align: center; width: 100%;">
<div>
<input type="button" id="btnS1" onclick="s1();" value="populate 1" />
<input type="button" id="btnS2" onclick="s2();" value="populate 2" />
</div>
<div>
<table class="display" id="example">
<thead>
<tr>
<th>col0</th>
<th>co11WithFloatingValue</th>
<th>col2</th>
<th>col3WithInt</th>
</tr>
</thead>
<tbody>
<!-- data goes here -->
</tbody>
</table>
</div>
</body>
</html>
thx per la risposta, ma sembra che non ha funzionato. In realtà non posso cambiare la denominazione di R, il codice fornito è una semplificazione, se riesco a farlo funzionare, sarò in grado di risolvere il mio problema. A proposito, secondo le mie intese, la denominazione va bene con mData e aoColumns, anche se non ne sono sicuro. Usando il comando bRetrieve si impedisce il messaggio di errore, ma non si cambia nulla, "populate2" non cambia mai il contenuto della tabella. Questo è ciò di cui ho bisogno, quando si fa clic su "populate1" con un contenuto, quando si fa clic su "populate2" ne viene fatto un altro, cambiando l'intera tabella ogni volta. cordiali saluti – user1340802
Si prega di consultare la risposta aggiornata. Immagino tu abbia bisogno di distruggere il datatable esistente usando ** 'jQuery ('# esempio'). DataTable(). FnDestroy();' ** in modo che abbia nuovi dati nella stessa tabella sia per il clic – Yogesh
ne ho trovato uno più, basta aggiungere ** '" bDestroy ": true,' ** nella dichiarazione datatable. Spero che questo ti aiuti questa volta. Non è necessario chiamare fnDestory method – Yogesh