8
Potrzebuję całkowicie zmienić zawartość datatable, robiąc to z perspektywy javascript. Nie z żadnym wywołaniem Ajaxa lub tak, jak czytałem wiele razy. Właściwie wykonaj następujący skrypt, a przełączenie zawartości tabeli będzie działało.jquery.dataTables: jak zmienić całkowicie zawarte dane/aaData?
myślałem, że mogę używać:
oTable.fnClearTable();
oTable.fnAddData(R);
oTable.fnAdjustColumnSizing();
ale to nie działa.
i uzyskać:
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
tutaj jest przykładowy skrypt:
<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 za odpowiedź, ale wygląda na to, że nie działa. Właściwie nie mogę zmienić nazwy R, podany kod jest uproszczeniem, jeśli mogę sprawić, że zadziała, będę mógł rozwiązać mój problem. BTW, zgodnie z moim rozumowaniem, nazewnictwo jest w porządku z mData i aoColumns, nawet jeśli nie jestem pewien. Użycie bRetrieve zapobiega wyświetlaniu komunikatu o błędzie, ale nic nie zmienia, "populate2" nigdy nie zmienia zawartości tabeli. To jest to, czego potrzebuję, klikając na "wypełnić 1", mając jedną treść, klikając na "zapełnij2", mając inną, zmieniając cały stół za każdym razem. pozdrawiam – user1340802
Proszę zobaczyć zaktualizowaną odpowiedź. Chyba musisz zniszczyć istniejący datatable za pomocą ** jQuery ('# example'). DataTable(). FnDestroy(); '** tak, że będzie miał nowe dane w tej samej tabeli dla obu kliknięć – Yogesh
Znalazłem jeden więcej sposób, po prostu dodaj ** '" bDestroy ": true,' ** w deklaracji danych. Mam nadzieję, że to pomoże tym razem. Nie trzeba wywoływać metody fnDestory – Yogesh