After appending table body - export buttons are not showing up/no data

abdulin

I'm calling ajax function to load table body and display in the table, and its working without problem.
Now I wanted to add Export buttons to table but its not showing up. Please help me to figure out how to do that.
I have used all required libraries in the page. If table data is static its working but table body will be loaded after calling ajax function.
Here's my code:

 <table id="orderList">
 <thead>
 <tr>
 <th>1</th>
 <th>2</th>
 <th>3</th>

 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>


AJAX 
      $.ajax({
            type : 'POST', 
            url : '../search.php',
            data : formData,
            cache: false,
        })
.done(function(data) {
var jsonData = JSON.parse(data);
for (var i=0; i<jsonData.length; i++) {
var tbody = $("<tr/>");
 tbody.append("<td>" + jsonData .1 + "</td>");
 tbody.append("<td>" + jsonData .2 + "</td>");
 tbody.append("<td>" + jsonData .3 + "</td>");

$("#orderList tbody").append(tbody);
}

$('#orderList ').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });

})

colin

Hi @abdulin ,

Have you also included the necessary JS and CSS files? The best bet is to look at this page here and look at the Javascript and CSS tabs.

Cheers,

Colin