datatables with ajax in php - php

Question

I am working on event management site where i've to send emails and show the read, unread, bounced back...etc status email address in modal box. Showing the email addresses in modal box is working fine. I want to add datatables to it. When i Load the modal box first time it is showing the pagination but when i click on second time there is datatables error. Can Anyone help me in this please? Below is my code:-
$("body").on("click", ".textcontent", function(){
var option = $(this).attr("option");
var campaign_id = $("#campaign").val();
$.ajax({
type: "POST",
url: "get_emaillist.php",
data: { option : option, campaign_id : campaign_id },
success: function (resp){
$("#emailslist").html(resp);
$("#myModal").modal("show");
}
});
});
Below is the response from ajax
<?php
$option = $_REQUEST["option"];
$campaign_id = $_REQUEST["campaign_id"];
$emaillist = $gnrl->emaillist($campaign_id,$option);
$totalemail = count($emaillist);
?>
<div class="container">
<div class="row">
<div class="agent-profile">
<div class="col-lg-10 col-sm-10">
<div class="modal fade modelbx" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="padding: 20px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $option." Users List"; ?></h4>
<?php if($totalemail){ ?>
Export Users
<?php } ?>
</div>
<div class="modal-body">
<?php if(isset($campaign_id) && $campaign_id != "" && $campaign_id != "0"){ ?>
<div class="form-group">
<label class="control-label" for="selectbasic">Event Name</label><hr>
<div><span class="emaillist"><?php echo $campaigntitle = $dclass->select("tbl_campaign","campaignsubject","id = :id",array("id" => $campaign_id)); ?></span></div>
</div>
<?php } if($option == "Nominated" && $totalemail > 0){ ?>
<div class="form-group">
<table border="1" id="statstable">
<thead>
<tr>
<th>Nominated By User</th>
<th>Nominated User Name</th>
<th>Email</th>
<th>Company</th>
<th>Contact Number</th>
<th>Mobile Number</th>
</tr>
</thead>
<tbody>
<?php
if(isset($campaign_id) && $campaign_id != "0"){
$nominateduid = $dclass->select("tbl_nominateusers n left join tbl_user u on n.user_id = u.id","n.id,n.user_id,u.emailaddress"," AND n.campaign_id = '$campaign_id'");
}else{
$nominateduid = $dclass->select("tbl_nominateusers n left join tbl_user u on n.user_id = u.id","n.id,n.user_id,u.emailaddress");
}
foreach($nominateduid as $value){
$nominid = $value["id"];
if(isset($campaign_id) && $campaign_id != "0"){
$selcond = " AND campaign_id = '$campaign_id' AND id = '$nominid'";
}else{
$selcond = " AND user_id = '{$value["user_id"]}' AND id = '$nominid'";
}
$emaildet = $dclass->select("tbl_nominateusers","*",$selcond);
?>
<tr>
<td>
<?php
if($value["user_id"] == 0){
if(isset($campaign_id) && $campaign_id != "0"){
$nominatedemailaddress = $dclass->select("tbl_emailusers","useremail","campaign_id = :campaign_id AND user_id = :user_id",array("campaign_id" => $campaign_id, "user_id" => 0));
}else{
$nominatedemailaddress = $dclass->select("tbl_emailusers","useremail","user_id = :user_id",array("user_id" => 0));
}
}else{
$nominatedemailaddress = $value["emailaddress"];
}
echo $nominatedemailaddress;
?>
</td>
<td>
<?php
if(isset($emaildet[0]["nominatename"]) && $emaildet[0]["nominatename"] != ""){
echo $emaildet[0]["nominatename"];
}else{
echo "---";
}
?>
</td>
<td>
<?php
if($totalemail > 0){
echo $emaildet[0]["useremails"];
}else{
echo "There is No $option Email";
}
?>
</td>
<td>
<?php
if(isset($emaildet[0]["companyname"]) && $emaildet[0]["companyname"] != ""){
echo $emaildet[0]["companyname"];
}else{
echo "---";
}
?>
</td>
<td>
<?php
if(isset($emaildet[0]["contactnumber"]) && $emaildet[0]["contactnumber"] != ""){
echo $emaildet[0]["contactnumber"];
}else{
echo "---";
}
?>
</td>
<td>
<?php
if(isset($emaildet[0]["mobilenumber"]) && $emaildet[0]["mobilenumber"] != ""){
echo $emaildet[0]["mobilenumber"];
}else{
echo "---";
}
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php }else{ ?>
<div class="form-group">
<table border="1" id="statstable">
<thead><tr><th>Email Address</th></tr></thead>
<tbody>
<?php
if($totalemail > 0){
foreach($emaillist as $emails){
?>
<tr><td><?php echo $emails; ?></td></tr>
<?php } }else{ ?>
<tr><td><?php echo "There is No $option Email"; ?></td></tr>
<?php } ?>
</tbody>
</table>
</div>
<?php } ?>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<style>
.modal.fade.in{ top: 10%!important; }
img{ max-width: 125%!important; }
.modal-dialog{ width: 900px!important; }
.modal .modal-body{ max-height: 420px; overflow-y: auto; }
.modal{ width: auto!important; }
.carttable, .carttable td{ padding: 5px; }
.modelbx{ background: rgba(0, 0, 0, 0) url("../images/login-main-bg.png") repeat scroll 0 0; bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 999999 !important; }
.sbbtn{ background-color: green; border: 0!important; border-radius: 10px; color: #fff; height: 35px; width: 90px; }
.alert-success{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert{ padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.textcontent{ float: left; width:100%; color: #5C9BD5; }
.emaillist{ color: #5698D4; line-height: 30px; margin: 10px; }
td, th{ padding: 10px!important; }
#statstable{ margin-bottom: 20px!important; }
</style>
<script type="text/javascript">
$(document).ready(function (){
$("#statstable").dataTable({
"aaSorting": [[0,"desc"]]
});
});
</script>

Answer 1

When you charge new elements with ajax, the javascript code doesn´t know those new elements. Maybe you can try recalling the data-tables init in the success section of the ajax call.