datatables initialize again after success ajax pull data

Question

Im using datatables and I came across for a self requirements where I want a live table data and I use datatables for this requirements, however Im having an issue where datatables wont initialize after a json pull data (after successfully pull the json response from the server). Below is the code for my json post request (refer below)

$.post("/test", { id: "1" }, function(response){
        if(response.success){
            var bbr = $("#ua_table tbody");
            bbr.html("");
            $.each(response.persons, function(index, value){
                bbr.append('<tr><td>' + value.name + '</td><td>' + value.address + '</td><td>' + value.job + '</td><td>' + value.contact + '</td></tr>');
            });

        }
    }, 'json');

and I even tried to do appends inside that tables tbody (In the script snippets, you can see the button that has a class of "load" function) and it did successfully appends (everytime you hit the button that has a class of "load", you'll see that there's added into the table's tbody) but the pagination stuff (like showing 1 to 3 of 3 entries and the pagination navs e.g. first,1,last) is not changing so it means the table is not initialize again, any ideas, clues, suggestions, help, recommendations?

PS: also the datatabletools didnt work (no copy, csv, excel, print button shown), as you can see, I already link the datatabletools script and style, any ideas?

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $("#ua_table tbody").append('<tr><td>Sample name</td>><td>Sample address</td><td>Sample Job</td><td>Sample Contact</td></tr>');
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>


<table class="table" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

Check this post http://stackoverflow.com/questions/12934144/how-to-reload-refresh-jquery-datatable — Mindastic, Jul 08 '15 at 02:59

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

You should use row.add() to add rows.

I answered your question about TableTools earlier. TableTools didn't work because its JS file needs to be loaded after DataTables JS file. Also it doesn't work in the example below, probably due Flash security restrictions. You need to put this example on your server for it to work.

I also added Bootstrap styling, seems like you wanted to do it anyway.

See the example below for code and demonstration.

$(document).ready(function(){
  $('#ua_table').DataTable({
        "pagingType": "full_numbers",
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf"
        }
    });
  
  $(".load").click(function(){
    $('#ua_table').DataTable().row.add(['Sample name', 'Sample address', 'Sample Job', 'Sample Contact']).draw();
  });  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<link href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet"/>  

<script src="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js"></script>


<table class="table table-striped table-bordered" id="ua_table">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Job</th>
    <th>Contact</th>
  </thead>
  <tbody>
    <tr>
      <td>Sample name 1</td>
      <td>Sample address 1</td>
      <td>Sample job 1</td>
      <td>Sample contact 1</td>
    </tr>
    <tr>
      <td>Sample name 2</td>
      <td>Sample address 2</td>
      <td>Sample job 2</td>
      <td>Sample contact 2</td>
    </tr>
    <tr>
      <td>Sample name 3</td>
      <td>Sample address 3</td>
      <td>Sample job 3</td>
      <td>Sample contact 3</td>
    </tr>
  </tbody>
 </table>

<button class="load">Load ajax</button>

i run your code snippet but export to excel, csv, pdf is not working, only print. any ideas? — Juliver Galleto, Jul 08 '15 at 03:55
@CodeDemon, TableTools won't work on SO inside ``. Put this example on your server for it to work. — Gyrocode.com, Jul 08 '15 at 04:08
hi, how can i empty the tbody contents first and then add the json data ("tr and td stuffs") and then initialize it? — Juliver Galleto, Jul 08 '15 at 05:51
@CodeDemon, you can use [clear()](http://datatables.net/reference/api/clear%28%29) to remove all rows. However it sounds that you can just set URL for your DataTable with [ajax.url](https://datatables.net/reference/option/ajax) option and then use [ajax.reload()](http://datatables.net/reference/api/ajax.reload%28%29) when the data should be reloaded from the server. — Gyrocode.com, Jul 08 '15 at 10:49
that would be cool, but how about if I have classes and data binding on each tr or selected tr. How can I put that data binding and classes to a tr or td? — Juliver Galleto, Jul 08 '15 at 10:53
@CodeDemon, seems like you posted your question on SO, I will answer it there. — Gyrocode.com, Jul 08 '15 at 11:01

datatables initialize again after success ajax pull data

1 Answers1