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的命名，所提供的代码是一个简化，如果我能使它工作，我将能够解决我的问题。顺便说一句，根据我的理解，即使我不确定，mData和aColumns的命名也可以。使用bRetrieve可以防止出现错误消息，但不会更改任何内容，“populate2”永远不会更改表格的内容。这是我需要的，当点击带有一个内容的“populate1”时，当点击具有另一个内容的“populate2”时，每次都改变整个表格。最好的问候 – user1340802
请参阅最新的答案。我猜你需要使用**''jQuery（'＃example'）。dataTable（）。fnDestroy（）;'**来销毁现有的数据表，以便它在同一个表中都有新的数据，点击 – Yogesh
我发现更多的方法，只需在数据表单声明中添加**''bDestroy“：true，**。希望这次会有所帮助。无需调用fnDestory方法 – Yogesh