CODEWITHSUNDEEP
jqueryajaxdatatablesfiltering
PHP User
PHP User

Reputation: 2422

draw table after ajax does not apply to filtration

I'm having a datatable with buttons work using ajax to update some data in the table. This table has a filtration drop down menu. 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>

and drop down menu with 2 values: paid and didn't pay

clicking the button changes the text to "paid" no problem at all. After success:

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

but when I change the drop down menu to "paid" i can't see the second row and when I change to "didn't pay' I can see it which means the drop down menu didn't recognize the change that happened after the AJAX. So is there any way to make the filtration parameters reload or redraw the table after the AJAX to display updated data? Thanks in advance and best wishes.

Upvotes: 0

Views: 114

Answers (1)

CMedina
CMedina

Reputation: 4222

You need change the data in your DataTable, you're just change the text, you can use cell().data().

First, get the tr element:

var oTr = $(this).closest('tr');

Second, get row of table:

var row = table.row(oTr);

And finally, change the data and draw the table (Remember indicate the index of column, in this case is 2):

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

Your code should look like:

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

});

Result: https://jsfiddle.net/fce3tved/1/

UPDATE CODE:

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

Upvotes: 1

Related Questions