Question

我有一个带按钮的数据表使用ajax来更新表中的某些数据。该表有一个过滤下拉菜单。 jsfiddle without ajax but the same issue

var table = $('#data').DataTable({
  "lengthMenu": [[50, 100, -1], [50, 100, "All"]]
});

<tr><td>jack</td><td>2016</td><td>paid</td></tr>
<tr><td>andy</td><td>2015</td><td>didn't pay<input type="button" id="1" class="btn"></td></tr>

并下拉菜单中包含2个值：付费且未付款

点击该按钮可将文字更改为＆＃34;付费＆＃34;完全没问题。成功后：

$("#status").change(function() {    
table.column(2).search($(this).val()).draw() });
 $(".btn").on('click',function (e) {
        e.preventDefault();
        var id = $(this).attr('id');
        $.post('ajax/pay.php',{id:id}).done(function (data) {
            if(data.trim().indexOf('ok')>-1){
                alert('done'); //alert is displayed
                $(".btn[id="+id+"]").fadeOut('normal'); //faded out
                $(".btn[id="+id+"]").parent().text('paid'); //text changed
                table.draw();
            }                  
        });
    });

但当我将下拉菜单更改为＆＃34;付费＆＃34;我无法看到第二行，当我改为＆＃34;没有付出＆＃39;我可以看到它意味着下拉菜单没有识别AJAX之后发生的变化。那么在AJAX之后有没有办法让过滤参数重新加载或重绘表以显示更新的数据？在此先感谢并祝福。

Answer 1

您需要更改DataTable中的数据，只需更改文字，即可使用cell().data()。

首先，获取tr元素：

table.cell(row, 2).data("paid").draw();

其次，获取表格行：

$(".btn").on('click',function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    alert('done'); 
    $(".btn[id="+id+"]").fadeOut('normal'); 
    //$(".btn[id="+id+"]").parent().text('paid'); 
    var oTr = $(this).closest('tr');

    var row = table.row(oTr);
    table.cell(row, 2).data("paid").draw();

});

并且终于，更改数据并绘制表格（记住表示列的索引，在本例中为2）：

$(".btn").on('click',function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $.post('ajax/pay.php',{id:id}).done(function (data) {
        if(data.trim().indexOf('ok')>-1){
            alert('done'); //alert is displayed
            $(".btn[id="+id+"]").fadeOut('normal'); //faded out
            //$(".btn[id="+id+"]").parent().text('paid'); //text changed
            //table.draw();
            var oTr = $(this).closest('tr');
            var row = table.row(oTr);
            table.cell(row, 2).data("paid").draw();
        }                  
    });
});

您的代码应如下所示：

{{1}}

结果： https://jsfiddle.net/fce3tved/1/

更新代码：

{{1}}

ajax不适用于过滤后绘制表

1 个答案: