【需求】:点击不同链接,使DataTables加载不同的数据,并定时拉取最新数据
本文适用jquery.dataTables.min.js 版本:1.9.4 ;其它几个js:
jquery-2.0.3.min.js
fnReloadAjax.js 下载
HTML
<a href="#" id="1" class="cluster">rmqdev-1</a> <a href="#" id="2" class="cluster">rmqdev-2</a> <table id="sample-table-2"> <thead> <tr> <th>#</th> <th>Node name</th> <th>IP</th> <th>File descriptors</th> <th>Socket descriptors</th> <th>Erlang processes</th> <th>Memory</th> <th>Disk space</th> </tr> </thead> </table>JS
<script type="text/javascript"> var table; $('.cluster').click(function () { var cluster_id = $(this).attr("id"); listNode(cluster_id); }); jQuery(function ($) { setInterval(function () { if ($.fn.dataTable.fnIsDataTable(document.getElementById('sample-table-2'))) { table.fnReloadAjax(); } },3000); }); function listNode(cluster_id) { if ($.fn.dataTable.fnIsDataTable(document.getElementById('sample-table-2'))) { table = $('#sample-table-2').DataTable(); table.fnDestroy(false); } table = $('#sample-table-2').DataTable( { "bProcessing": true,"sAjaxSource": "/node/list?cluster_id=" + cluster_id } ); } </script>
后台返回JSON样例
{ "aaData": [ [ "1","xxx.com","10.30.237.112","2001","1539","30295","2GB","79GB" ],[ "2","yyy.com","10.30.237.113","667","217","15705","2.5GB","50GB" ],[ "3","zzz.com","10.30.237.114","655","205","17653","3GB","100GB" ] ] }