Question

是否有人能够指导如何在每1分钟间隔刷新数据表数据而无需重新加载整个页面。

这是我的代码：

$(document).ready( function () {
           var refreshTable = $('#id_css').DataTable({
                "sAjaxSource": 'ajax/alert_data.txt',
                "bServerSide": true,
                "iDisplayLength": 100,
                "bFilter": false,
                "aaSorting" : [[2, "desc"]],
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    if ( aData[2] == "5" )
                    {
                        $('td', nRow).css('background-color', 'Red');
                    }
                    else if ( aData[2] == "4" )
                    {
                        $('td', nRow).css('background-color', 'Orange');
                    }
                 }

              });
setInterval (function test() {
refreshTable.fnDraw();
}, 1000);
 });

我已尝试使用此插件 fnReloadAjax.js ，但继续 TypeError：refreshTable.fnReloadAjax不是函数。这就是我使用它的方式：

setInterval (function test() {
refreshTable.fnReloadAjax();
}, 1000);

我还添加了它的cdn

<script src="//cdn.datatables.net/plug-ins/725b2a2115b/api/fnReloadAjax.js"></script>

非常感谢任何协助或指导。

Answer 1

你可以做到

var refreshTable = $('#id_css').DataTable({ ...

然后在document.ready函数内（必须在范围内，否则fnDraw将不起作用）你使用：

setInterval (function test() {
    refreshTable.fnDraw();
}, 1000);

存在范围问题，代码应如下所示：

$(document).ready( function () {
       var refreshTable = $('#id_css').DataTable({
            "sAjaxSource": 'ajax/alert_data.txt',
            "bServerSide": true,
            "iDisplayLength": 100,
            "bFilter": false,
            "aaSorting" : [[2, "desc"]],
            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[2] == "5" )
                {
                    $('td', nRow).css('background-color', 'Red');
                }
                else if ( aData[2] == "4" )
                {
                    $('td', nRow).css('background-color', 'Orange');
                }
             }   
       });
       setInterval (function test() {
         refreshTable.fnDraw();
       }, 1000);
 });

Answer 2

奇怪的是，将 DataTable 更改为 dataTable 是导致此失败的根本原因。那是小d而不是大写D，真的很烦人......

$(document).ready( function () {
       var refreshTable = $('#id_css').dataTable({
            "sAjaxSource": 'ajax/alert_data.txt',

自动刷新DataTables表并重新加载整个页面

2 个答案: