8
私は完全にデータテーブルの内容を変更する必要があります、それはJavaScriptの観点からそれをやっている。私は何度も何度も読んでいるので、Ajaxコールなどではありません。実際には、次のスクリプトを動作させ、テーブルの内容を切り替えることはそのトリックを行います。jquery.dataTables：完全に含まれるデータ/ aaDataを変更する方法は？
私が使用できることを考えた：
oTable.fnClearTable();
oTable.fnAddData(R);
oTable.fnAdjustColumnSizing();
をしかし、それは動作しません。
と私が得る：ここ
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
は、サンプルスクリプトです：
<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を、それがうまくいかなかったように見えます。実際に私はRの命名を変更することはできません、提供されるコードは簡素化、私はそれを動作させることができれば、私は私の問題を解決することができるでしょう。私の理解によると、BTWは、mDataとaoColumnsの名前は間違っていますが、わかりません。 bRetrieveを使用するとエラーメッセージは表示されませんが、何も変更しないと、 "populate2"はテーブルの内容を決して変更しません。これは、 "populate1"をクリックすると1つのコンテンツを、 "populate2"をクリックすると、別のものをクリックして、毎回テーブル全体を変更するときに必要なものです。お待ちください – user1340802
更新された答えをご覧ください。あなたは、** jQuery（ '＃example'）.dataTable（）。fnDestroy（）; '**を使用して既存のデータテーブルを破棄して、両方のクリックに対して同じテーブルに新しいデータを持たせる必要があると思います – Yogesh
より多くの方法で、** '' bDestroy '：true、 '** datatable宣言で**を追加してください。これがこの時間に役立つことを願っています。今度はfnDestoryメソッドを呼び出す必要はありません – Yogesh