javascript - datatables initialize again after success ajax pull data -

im using datatables , came across self requirements want live table data , use datatables requirements, im having issue datatables wont initialize after json pull data (after pull json response server). below code 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 tried appends inside tables tbody (in script snippets, can see button has class of "load" function) , did appends (everytime hit button has class of "load", you'll see there's added table's tbody) pagination stuff (like showing 1 3 of 3 entries , pagination navs e.g. first,1,last) not changing means table not initialize again, ideas, clues, suggestions, help, recommendations?

ps: datatabletools didnt work (no copy, csv, excel, print button shown), can see, link datatabletools script , style, 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>

you should use row.add() add rows.

i answered question tabletools earlier. tabletools didn't work because js file needs loaded after datatables js file. doesn't work in example below, due flash security restrictions. need put example on server work.

i added bootstrap styling, seems wanted anyway.

see example below code , 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>