JQuery Datatables data won't updating

Question

I'm new to jquery, especially datatables. I load the data recieved from ajax call response to table as follows:

$(document).ready(function() {
        $("#reservation").on("change", sendDate);
      });
    function LoadResponse(data) {
                 var table = $("#example2 > tbody");
                 table.empty();
                 table.html('');
                    var rows = data.split(/[@]/);
                    $("#dvCSV").html('');
                    //there are null before the first /@/
                    for (var i = 1;i<rows.length;i++) {
                        var row = "<tr>";
                        var cells = rows[i].split(", ");
                        var cell = "";
                        for (var j = 0; j < cells.length; j++) {
                             cell = cell + "<td>"+cells[j]+"</td>";
                        }
                        row = row+cell+"</tr>";
                        table.append(row);
                    }
              $(function () {
             $('#example2').DataTable().fnClearTable();
                        $('#example2').DataTable({
                            "destroy":true,
                            "dom": 'itp',
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false
                          });
                  ;
                        console.log(table);})
    };

    function sendDate() {
     var formData = new FormData($("#upload-file-form")[0]);
     $.ajax({
         url: "/sendDate",
         type: "POST",
         data: formData,
         enctype: 'multipart/form-data',
         processData: false,
         contentType: false,
         cache: false,
         beforeSend: function (){
    //      location.reload(false);
    //   $('#example2').DataTable().fnClearTable();
         },
         success: function (data) {
           // Handle upload success
    //      location.reload(false);
          alert("Date send to server: "+data+". date range:"+formData.get("dateRange"));
          LoadResponse(data);
         },
         error: function (error) {
           // Handle upload error
         }
     });
    }

The code works fine for first request. However after user do another request, and then server give response, the table won't load the new data. Instead it's still use the first data received on the client-side. I can guarantee the data is received, as it seen on alert("date send to server: ").

I have tried many ways and neither of them working, including:

table.empty();

table.html('');

emptying the tbody

 $("#dvCSV").html('');

Reload the page. This will make table lost the data from the first time.

location.reload(false);

And this.

$('#example2').DataTable().fnClearTable();

This will load the new data, but just temporary. Any action done to to the table will bring it back to old data. For example action on pagination, show entries, etc.

And here is my table html:

    <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                    <thead>
                    <tr>
                      <th>MSISDN</th>
                      <th>Action</th>
                      <th>Filename</th>
                      <th>Date Uploaded</th>
                      <th>Status</th>
                      <th>Status Message</th>
                    </tr>
                    </thead>
                    <tbody  id="dvCSV">
                    </tbody>
                    <tfoot>
                    <tr>
                      <th>MSISDN</th>
                      <th>Action</th>
                      <th>Filename</th>
                      <th>Date Uploaded</th>
                      <th>Status</th>
                      <th>Status Message</th>
                    </tr>
                    </tfoot>
                  </table>
                </div>
                <!-- /.box-body -->

Any help or idea will be greatly appreciated (:

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

I'm sorry but my problem solved with this solution.

Using $('#example2').dataTable().fnDestroy();

edited May 23 '17 at 12:14

Community

1
1

answered Jul 19 '16 at 04:05

Shofwan

451
2
6
16

score 0 · Answer 2 · answered Jul 19 '16 at 03:37

0

What you have to do is reload the table. Initially assign your data table instance to a variable like

var dTable = $('#example2').DataTable({
                            "destroy":true,
                            "dom": 'itp',
                            "paging": true,
                            "lengthChange": false,
                            "searching": false,
                            "ordering": true,
                            "info": true,
                            "autoWidth": false
                          });

Then when you receive an update, just reload the table usisg that instance.

 dTable .ajax.reload();

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

answered Jul 19 '16 at 03:37

Tharsan Sivakumar

6,351
3
19
28

Do I have to reload before appending new data or do reload after append new data? – Shofwan Jul 19 '16 at 03:43
After updating with new data, reload the table – Tharsan Sivakumar Jul 19 '16 at 03:45
I've tried to put `var dTable` inside `$(document).ready(function() {});`. It do reload the data, but doesn't update the table information, pagination, etc. – Shofwan Jul 19 '16 at 03:55
Ups, I think I found my solution in [here](http://stackoverflow.com/questions/24944000/jquery-datatables-not-working-properly). Do you know Is it runs faster or slower than your solution? Then should I answer using this link and then accept it? Or should I remove my question? – Shofwan Jul 19 '16 at 03:55
ok. Have a look on this as well .http://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable – Tharsan Sivakumar Jul 19 '16 at 03:59

LuisEduardox · Answer 3 · 2018-03-08T21:40:49.137

In the version 1.10.16 (2018), if you want to destroy a DataTable instance, you have to use:

// Get Instance
var TablaExample = $('#TablaExample').DataTable();

// Use method directly to Destroy
TablaExample .destroy();

Note: this method can't destroy data in the table, if you set data in tr and td tags in html "manually".

if you want to delete all data inside table, you can use clear().draw() method. For example:

// Get Instance 
var TablaExample = $('#TablaExample').DataTable();

// Delete all data inside table and maintain the DataTable instance
TablaExample.clear().draw();

JQuery Datatables data won't updating

3 Answers3