ajax - Refresh jQuery datatable table

Question

Been plenty of questions about this but I never found one that worked for me. I have a plain and simple HTML table whos body is being filled with rows from an AJAX call. Then I want to update the table with DataTable plugin but it does not work. I have a HTML table that looks like this:

<table id="myTable">
  <thead>
     <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

In my jQuery pageload

$(document).ready(function(){
        var oTable = $('#myTable').dataTable({
            "aoColumns": [
              { "bSortable": false },
              null, null, null, null
            ]
        });
});

And finally my on dropdownlist change function

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
        var oTable = $('#myTable').dataTable(); // Nothing happens
        var oTable = $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

The append and so on has been modified to shorten it down, etc so do not focus too much on it.

Basically the question is how to update the table, I can do my AJAX and add new data to the table fine, but the datatable plugin does not update with it. I've tried other things like

.fnDraw(false);

But it does nothing While I get an JSON error from

fnReloadAjax()

Any clues on just how to refresh the table?

Answer 1

Try this

Initially you initialized the table so first clear that table

$('#myTable').dataTable().fnDestroy();

Then initialize again after ajax success

$('#myTable').dataTable();

Like this

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
       $('#myTable').dataTable().fnDestroy();
       $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

DEMO