how to append data after ajax call in dataTable - json

Question

I am using dataTable jquery plugin.My data comes from ajax. code shown below
I want to create table after ajax call. In my html file
$(document).ready(function(){
$(".report-table").DataTable({
"pagingType": "full_numbers"
});
});
In my javascript
$("#student_report_form_btn").on('click',function(){
$("#student_report_detail_list").empty();
if($("#student_report_form").valid())
{
$.ajax({
url:site + 'index.php/user_report',
type:"post",
dataType:"json",
data:sume data,
success:function(msg){
if(msg.user_report_detail !='')
{
//dddd(msg);return false;
student_report_table = '';
student_report_table += '<div class="table-responsive">';
student_report_table += '<table class="table table-bordered report-table" id="report-table">';
student_report_table +='<tr><th>Date</th><th>Intime</th><th>Outtime</th></tr>';
$.each(msg.user_report_detail,function(k,v){
student_report_table += '<tr><td>'+ v['date'] +'</td><td>'+ v['intime'] +'</td><td>'+ v['outtime'] +'</td></tr>';
});
student_report_table += '</table>';
student_report_table += '</div>';
$("#student_report_detail_list").append(student_report_table);
}else{
$("#student_report_detail_list").append("<div class='alert alert-danger'>" +
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'> <span aria-hidden='true'>×</span></button>" +
"<strong>Sorry!</strong> There are not records for this user." +
"</div>");
setTimeout(function() { $('.alert').alert('close'); }, 2000);
}
}
});
}
});
The dataTable here does not work. Please help.

Answer 1

if your method to create the table works (there are far better possibilities to create a datatable) i think the only problem is you've to initialize your table
try the following
$("#student_report_form_btn").on('click',function()
{
$("#student_report_detail_list").empty();
if($("#student_report_form").valid())
{
$.ajax({
url:site + 'index.php/user_report',
type:"post",
dataType:"json",
data:sume data,
success:function(msg){
if(msg.user_report_detail !='')
{
//dddd(msg);return false;
student_report_table = '';
student_report_table += '<div class="table-responsive">';
student_report_table += '<table class="table table-bordered report-table" id="report-table">';
student_report_table +='<tr><th>Date</th><th>Intime</th><th>Outtime</th></tr>';
$.each(msg.user_report_detail,function(k,v){
student_report_table += '<tr><td>'+ v['date'] +'</td><td>'+ v['intime'] +'</td><td>'+ v['outtime'] +'</td></tr>';
});
student_report_table += '</table>';
student_report_table += '</div>';
$("#student_report_detail_list").append(student_report_table);
$("#student_report_detail_list .report-table").DataTable({
"pagingType": "full_numbers"
});
}else{
$("#student_report_detail_list").append("<div class='alert alert-danger'>" +
"<button type='button' class='close' data-dismiss='alert' aria-label='Close'> <span aria-hidden='true'>×</span></button>" +
"<strong>Sorry!</strong> There are not records for this user." +
"</div>");
setTimeout(function() { $('.alert').alert('close'); }, 2000);
}
}
});
}
});