10

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.

10 Answers 10

9

Use like it

$('#product_table').DataTable().ajax.reload();
4

Get table id first, like:

var table=('#tableid').Datatable();
table.draw();

just put these lines after ajax success function to reload datatable

3

On a button click you don't 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.

Just use:

$("#Table_id").ajax.reload();

Check the below link, you will have better idea.

https://datatables.net/reference/api/ajax.reload()

4
  • I try it too here: afterSend: function(){ $('.datatable-ajax-source table').DataTable().ajax.reload(); } its not working
    – MedKostali
    Aug 10, 2016 at 16:29
  • sorry i dont understand your question
    – MedKostali
    Aug 10, 2016 at 16:37
  • is your code is on live server ? or in your local pc only ? Aug 10, 2016 at 16:44
  • in local only; i use wampServer
    – MedKostali
    Aug 10, 2016 at 16:50
2

I had this same problem. I found a function I wrote on a project that deals with this. Here is a simple 2 column table I made.

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

This is my script to populate it:

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

You can ignore my column render function. I needed 2 buttons based on the data returned. The key was the table.destroy in the function. I created the table in a variable called table. I destroy it right in this initialization because it allowed me to use this same function over and over. The first time it destroys an empty table. Each call after that destroys the data and repopulates it from the ajax call.

Hope this helps.

Update: After playing with datatables alot more I found that setting table to a variable in a global scope to your function allows you to use reload.

var table = $('#memberships').DataTable({});

Then

table.ajax.reload();

should work.

2
  • This worked for me, I just destroyed the table then reinitialized it. Thanks! Jun 30, 2020 at 18:05
  • still working on laravel 8 and jquery 3.6. Thank you Oct 26, 2021 at 22:19
1

I created this simple function:

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}
0
1

use below code..it perfectly work, it keep your pagination without lose current page

$("#table-example").DataTable().ajax.reload(null, false );

0
1

$('.table').DataTable().ajax.reload(); This works for me..

2
  • This question was asked four years ago and your answer is simply a repeat of other answers. If you're going to add an answer to an old question think about what value your are adding.
    – Tom
    Aug 6, 2021 at 17:11
  • 1
    Alright! I have just started posting answers to this platform. Next time I will keep in mind. Aug 7, 2021 at 13:50
0

$("#Table_id").ajax.reload(); did not work.

I implemented -

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
2
  • .DataTable({});
    – sixstring
    Nov 11, 2022 at 20:48
  • did you use the correct syntax and pass the empty object?
    – sixstring
    Nov 11, 2022 at 20:48
0

.reload() is not working properly untill we pass some parameter

var  = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );
0

Try This i hope it will work

$("#datatable_id").DataTable().ajax.reload();

1
  • This doesn't seem like a good answer to me. You should not answer old questions (here almost 4 years ago) unless you have anything new to add that the other answers don't. Also add code boxes around your code. Please review How to answer before you continue answering. Jul 20, 2020 at 18:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.