使用ajax刷新表内容后重绘数据？ [英] Redraw datatables after using ajax to refresh the table content?

问题描述

我正在使用 Datatables ，并在页面上使用AJAX刷新表格的按钮。要清楚表格是不是使用ajax的数据源，我们只是在需要的时候使用ajax进行刷新。 Ajax正在刷新表中包含的div。我知道我丢失了分页按钮和过滤功能，因为表需要重绘，但我不知道如何将它添加到表初始化代码中。

数据表代码

  var oTable6; 
 $（document）.ready（function（）{
 oTable6 = $（'＃rankings'）。dataTable（{
sDom：'t<bottomfilp& $
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）。 
}; 
}，
  

解决方案

看起来好像可以使用API​​函数来

• 清除表（fnClearTable）


• 将新数据添加到表（fnAddData）


• 重绘表（fnDraw）

http://datatables.net/api

更新

我想您正在使用 DOM数据源（用于服务器端处理）生成表。我没有真的得到这个，所以我以前的答案将无法正常工作。

要使其工作而不重写服务器端代码： p>

您需要做的是完全删除旧表（在dom中），并将其替换为ajax结果内容，然后重新初始化datatable：

$

函数（数据）{

/ b


$ b

 /删除旧表
 $（＃ajaxresponse）。children（）。remove（）; 
 
 //替换新表
 $（＃ajaxresponse）。html（data）; 
 
 //重新初始化datatable 
 $（'＃rankings'）。dataTable（{
sDom：'t<bottomfilp><clear> ; 
bAutoWidth：false，
sPaginationType：full_numbers，
aoColumns：[
 {bSortable：false，sWidth 10px}，
 null，
 null，
 null，
 null，
 null，
 null，
 null，
 null，
 null，
 null，
 null 
] 
 
} 
）; 
} 
  

I am using Datatables and have a button on the page that refreshes the table using AJAX. To be clear the table isn't using an ajax source of data, we are just using ajax to refresh it only when needed. Ajax is refreshing the div which the table is wrapped in. I know i'm losing my pagination buttons and filtering capability because the table needs to be redrawn but i'm not sure how to add this into the table initialization code.

Datatables code

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
        ]

    });
});

The ajax code is this

$("#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);
        });
});

I tried this but it didn't work

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

解决方案

It looks as if you could use the API functions to

• clear the table ( fnClearTable )
• add new data to the table ( fnAddData)
• redraw the table ( fnDraw )

http://datatables.net/api

UPDATE

I guess you're using the DOM Data Source (for server-side processing) to generate your table. I didn't really get that at first, so my previous answer won't work for that.

To get it to work without rewriting your server side code:

What you'll need to do is totally remove the old table (in the dom) and replace it with the ajax result content, then reinitialize the datatable:

// 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
        ]

    } 
    );
}

这篇关于使用ajax刷新表内容后重绘数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！