使用AJAX刷新表的内容后,重绘数据表?数据表、内容、AJAX

2023-09-10 15:55:23 作者:幻影

我使用数据表并有刷新使用AJAX表中的页面上的按钮。表中未使用的数据的AJAX源只是用ajax需要的时候刷新它是明确的。阿贾克斯是刷新该表包在我知道我失去了我的分页按钮和过滤能力,因为该表需要重新绘制的股利,但我不知道如何添加这个到表初始化code。

数据表code

  VAR oTable6;
$(文件)。就绪(函数(){
    oTable6 = $('#排行榜)。dataTable中({
        sDom:T<自下而上的filp><清>',
        bAutoWidth:假的,
        sPaginationType:full_numbers,
        aoColumns:[
            {bSortable:假的,sWidth:10px的},
            空值,
            空值,
            空值,
            空值,
            空值,
            空值,
            空值,
            空值,
            空值,
            空值,
            空值
        ]

    });
});
 

阿贾克斯code是这个

  $(#ajaxchange)。点击(函数(){
    。VAR campaign_id = $(#campaigns_id)VAL();
    。VAR数fromdate = $(#由)VAL();
    。VAR TODATE = $(#为)VAL();

    VAR URL ='http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $。员额(URL,{campaignId:campaign_id,数fromdate:没有fromdate,TODATE:TODATE},
        功能(数据){
            $(#ajaxresponse)的HTML(数据);
        });
});
 

我试过,但没有奏效。

 fnDrawCallback:函数(){
    功能(数据){
        $(#ajaxresponse)的HTML(数据);
    };
},
 
excel怎么用代码刷新用户数据表

解决方案

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

清台(fnClearTable) 添加新的数据表(fnAddData) 重绘表(fnDraw)

http://datatables.net/api

更新

我猜你正在使用的 DOM数据源(用于服务器端处理)生成你的表。我并没有真正得到,在第一,所以我的previous答案不适用于这项工作。

为了得到它而无需重写你的服务器端code工作:

你需要什么做的就是彻底删除旧表(在DOM),并将其与阿贾克斯的结果内容替换,然后重新初始化数据表:

  //在$。员额回调:

功能(数据){

    //删除旧表
    $(#ajaxresponse)儿童()删除()。

    //更换新表
    $(#ajaxresponse)的HTML(数据);

    //重新初始化数据表
    $('#排行榜)。dataTable中({
    sDom:T<自下而上的filp><清>',
    bAutoWidth:假的,
    sPaginationType:full_numbers,
        aoColumns:[
        {bSortable:假的,sWidth:10px的},
        空值,
        空值,
        空值,
        空值,
        空值,
        空值,
        空值,
        空值,
        空值,
        空值,
        空值
        ]

    }
    );
}
 

I'm 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 were just using ajax to refresh it 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
        ]

    } 
    );
}