使用ajax刷新表内容后重绘数据表?

2021/01/18 07:11 · jquery ·  · 0评论

我正在使用数据表,并且页面上有一个按钮可以使用AJAX刷新表。为了清楚起见,该表未使用ajax数据源,我们仅使用ajax仅在需要时刷新它。Ajax正在刷新包装表的div。我知道我正在失去分页按钮和过滤功能,因为需要重绘表,但是我不确定如何将其添加到表初始化代码中。

数据表代码

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [ 
            { "bSortable": false, "sWidth": "10px" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]

    });
});

ajax代码是这个

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
        function( data ) { 
            $("#ajaxresponse").html(data);
        });
});

我尝试了这个,但是没有用

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},

似乎您可以使用API​​函数来

  • 清除表(fnClearTable)
  • 将新数据添加到表(fnAddData)
  • 重画表格(fnDraw)

http://datatables.net/api

更新

我猜您正在使用DOM数据源(用于服务器端处理)来生成表。一开始我并没有真正理解,所以我以前的回答对它不起作用。

要使其工作而无需重写服务器端代码:

您需要做的是完全删除旧表(在dom中)并将其替换为ajax结果内容,然后重新初始化数据表:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}

尝试使用bDestroy:true破坏数据表,如下所示:

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

bDestroy:true将首先销毁与该选择器关联的datatable实例,然后重新初始化一个新的选择器。

我不知道为什么。

oTable6.fnDraw();

为我工作。我把它放在下一行。

用这个:

var table = $(selector).dataTables();
table.api().draw(false);

要么

var table = $(selector).DataTables();
table.draw(false);

对于使用现代DataTables(1.10及更高版本)的用户,此页面上的所有答案和示例均适用于旧api,而不适用于新api。我很难找到一个新的示例,但最终找到了此DT论坛帖子(大多数人为TL; DR),这使我想到这个简洁的示例

在我终于注意到html字符串周围的$()选择器语法之后,示例代码为我工作。您必须添加节点而不是字符串。

该示例确实值得研究,但是按照SO的精神,如果您只想看一看能起作用的代码片段:

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

细心的读者可能会注意到,由于我们仅添加一行数据,因此table.row.add(...)应该也可以正常工作,并且对我有用。

这对我有用

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();

在初始化中使用:

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

然后使用:

$("#table_id").dataTable().fnDraw();

fnServerData中的重要内容是:

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

如果您直接推送到aoData,则在您第一次绘制表格时该更改将是永久性的,而fnDraw将无法按您想要的方式工作。

这就是我用ajax检索的数据来填充表的方式(不确定这是否是最佳实践,但是感觉很直观并且效果很好):

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}

检查fnAddData:https ://legacy.datatables.net/ref

$(document).ready(function () {
  var table = $('#example').dataTable();
  var url = '/RESTApplicationTest/webresources/entity.person';
  $.get(url, function (data) {
    for (var i = 0; i < data.length; i++) {
      table.fnAddData([data[i].idPerson, data[i].firstname, data[i].lastname, data[i].email, data[i].phone])
    }
  });
});
本文地址:http://jquery.askforanswer.com/shiyongajaxshuaxinbiaoneironghouzhonghuishujubiao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!