Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

reload datatable after ajax success

I use JQuery DataTable. I send data to datatable onclick in json file at ajax succes .the first click everything is good,But the next click I get only the right data ANd wrong value of dataTables_info it display always the first value of dataTables_info And paginatio AND row too from the first result. This is the first display of data in datatable:

The first Click

ALL the next Click I get only right data: For this exemple they are one result showing in picture below but everything else(info ,show,pagination) belong to first search showing in the first picture : enter image description here

In the second Exemple When I click at any page of pagination I get the content of the first page result!! This is my function ONclick:

    $ ( '#ButtonPostJson' ).on('click',function() {

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
               ..........................
               ..........................
                body    += "</tr>";
                $('.datatable-ajax-source table').append(body);

            })
        ;
            /*DataTables instantiation.*/
     $('.datatable-ajax-source table').dataTable();
    },

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

I try everything and i dont know what I miss. I use this jquery for datatable:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Thanks.

like image 329
MedKostali Avatar asked Aug 10 '16 15:08

MedKostali


People also ask

How to load data from Ajax success callback function?

The .reload () method can be triggered either explicitly (with a button click) or automatically. You can also use the .reload () method inside an Ajax success callback function and this is very simple.

How to force DataTables to rescan after Ajax request?

If your Ajax request puts the data back into the DOM, you can use rows ().invalidate () to force DataTables to rescan, otherwise, you'll have to clear the table with rows ().remove () and re-add with rows ().add (), how to use rows ().invalidate () to update my table? There are examples on the rows ().invalidate () that show its usage...

How do I reload a page after Ajax success?

Reload or Refresh a Page after Ajax Success using jQuery You can use the location.reload () method to reload or refresh an entire web page or just the content inside an element. The.reload () method can be triggered either explicitly (with a button click) or automatically.

How to initiate a DataTable from a button Clik?

On a button clik you dont need to empty your table body and make initiate the datatable again with the ajax. you just have to call your ajax again as you have already initiate on document ready function check the below link, you will have better idea. Show activity on this post. I had this same problem.


1 Answers

Use like it

$('#product_table').DataTable().ajax.reload();
like image 137
Waqar Sharif Avatar answered Oct 21 '22 00:10

Waqar Sharif