Question

我正在尝试重新加载我的jQuery DataTables而不刷新页面以尝试捕获新数据。

这是我开始这个过程的初始就绪函数：

 $(document).ready(function()
 {
   $.ajax({
     url:'api/qnams_all.php',
     type:"GET",
     dataType:"json"
   }).done(function(response) {
       console.log(response.data);
       renderDataTable(response.data)
   }).fail(function() {
       alert( "error" );
   }).always(function() {
       alert( "complete" );
   });  
 });

我正在将数据发送到此功能：

 function renderDataTable(data)
 {
   var $dataTable = $('#example1').DataTable({
     "data": data,
     "iDisplayLength": 25,
     "order": [[ 6, "desc" ]],
     "bDestroy": true,
     "stateSave": true
     // there's some more stuff, but I don't think necessary to show
   });
 }

我正在尝试使用此处找到的答案：How to refresh table contents in div using jquery/ajax

如下：

 setTimeout(function(){
   $( "#example1" ).load( "mywebpage.php #example1" );
 }, 2000);

使用上述所有代码，首次加载页面时，它看起来像这样：

但刷新后，它看起来像这样：

上面的图片确实在没有页面刷新的情况下重新加载，但我不确定为什么它看起来像上面的图片。

Answer 1

我认为这个例子很有用

//Reload the table data every 30 seconds (paging reset)
var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload();
}, 30000 );

更多详情 - here

Answer 2

创建一个加载/渲染数据的函数，然后在文档就绪并在2秒后调用它：

function loadAndRender()
{
    $.ajax(
    {
        url:'api/qnams_all.php',
        type:"GET",
        dataType:"json"
    }).done(function(response)
    {
        console.log(response.data);
        renderDataTable(response.data)
    }).fail(function()
    {
        alert( "error" );
    }).always(function()
    {
        alert( "complete" );
    });  

}

function renderDataTable(data)
{
    var $dataTable = $('#example1').DataTable(
    {
        "data": data,
        "iDisplayLength": 25,
        "order": [[ 6, "desc" ]],
        "bDestroy": true,
        "stateSave": true
        // there's some more stuff, but I don't think necessary to show
    });
}

$(document).ready(loadAndRender);

setTimeout(loadAndRender, 2000);

超时时jQuery AJAX调用函数

2 个答案: