用新的aaData值重新加载Datatable

Question

用新的aaData值重新加载Datatable

3

如何在收到新的Json数据时刷新Datatable

POST request Receives data , which is sent to LoadTable function to populate the datatable.

function initializeTable(){
 $("#submitbutton").on(
  'click',
  function(){
   $.ajax({
    type : 'POST',
    url : 'rest/log/events',
    data : {
     fromTime : $("#fromTime-filter").val(),
     toTime : $("#toTime-filter").val(),
     Text : $("#search-filter-input").val() 
    },
    
    success : function(data) {
     loadTable(data);
    },
    error : function(jqXHR, textStatus, errorThrown) {
     showAjaxError(jqXHR, textStatus, errorThrown,
      $("#error-msg"));
    }
   });
  });
}

'data' 被传递到 Load 函数，该函数将数据正确地加载到表格中 第一次。当我第二次提交 POST 请求时，在浏览器控制台中看到了新的 'data'，但 Datatable 没有被刷新。

但是当我刷新页面（Datatable 被清除）然后进行新的 POST 请求，新的数据正常加载。我希望无需刷新页面即可加载新数据。

function loadTable(data)
{
 $('#report-table').dataTable( {
  bProcessing : true,
  bJQueryUI : true,
  bLengthChange : false,
  bDestory : true,
  bRetrieve : true,
  bStateSave : true,
  oTableTools: {
   sRowSelect: "multi",
   aButtons: [ "select_all", "select_none" ]
  },
  iDisplayLength : 20,
  "aaData": data,
  "aoColumns": [
   { "mData" : "date"  },
   { "mData" : "name"   },
   { "mData" : "type"    },
   { "mData" : "section"   }
  ]
 } );
}

- johnmills

$.dataTable是什么插件？如果它是jQuery DataTables插件，您将想要使用$('#report-table').dataTable().fnUpdate(data)。 - TAGraves

@TAGraves：是的，使用JQuery Datatables。我应该在哪里添加fnUpdate(data)？在最后面吗？我尝试了一个if else循环：“if (typeof viewTable == 'undefined') { datatable(... } else{$('#report-table')datatable.fnUpdate(data)}”，但它没有起作用。 - johnmills

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TAGraves · Accepted Answer

看起来你正在使用DataTables v1.9。这是我会这样做的：

function loadTable(data)
{
    var table = $('#report-table');
    if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
    table.dataTable( {
        bProcessing : true,
        bJQueryUI : true,
        bLengthChange : false,
        bDestory : true,
        bRetrieve : true,
        bStateSave : true,
        oTableTools: {
            sRowSelect: "multi",
            aButtons: [ "select_all", "select_none" ]
        },
        iDisplayLength : 20,
        "aaData": data,
        "aoColumns": [
            { "mData" : "date"  },
            { "mData" : "name"      },
            { "mData" : "type"          },
            { "mData" : "section"       }
        ]
    } );
    } else {
      table.dataTable().fnUpdate(data);
    }
}

另一种选择：

    function loadTable(data)
    {
        var table = $('#report-table');
        if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
        table.dataTable( {
            bProcessing : true,
            bJQueryUI : true,
            bLengthChange : false,
            bDestory : true,
            bRetrieve : true,
            bStateSave : true,
            oTableTools: {
                sRowSelect: "multi",
                aButtons: [ "select_all", "select_none" ]
            },
            iDisplayLength : 20,
            "aaData": data,
            "aoColumns": [
                { "mData" : "date"  },
                { "mData" : "name"      },
                { "mData" : "type"          },
                { "mData" : "section"       }
            ]
        } );
        } else {
          table.dataTable().fnDestroy();
          loadTable(data);
        }
    }