How to fix "cannot reinitialize datatable" - php

Question

I have a data table with twelve(12) columns. I am using PHP to populate the data inside my data table. My problem is I can populate the data table but I am getting "Cannot reinitialize data table" error but I only initialize my table once. How can I fix this and avoid this problem in the future?
Here is my data table using javascript I am using serverside processing to get and populate my data table:
table = [
{ "width": "80px", "targets": 0 },
{ "width": "120px", "targets": 1 },
{ "width": "120px", "targets": 2 },
{ "width": "120px", "targets": 3 },
{ "width": "120px", "orderable": false, "targets": 4 },
{ "width": "120px", "targets": 5 },
{ "width": "100px", "targets": 6 },
{ "width": "110px", "targets": 7 },
{ "width": "150px", "orderable": false, "targets": 8 },
{ "width": "150px", "orderable": false, "targets": 9 },
{ "width": "150px", "orderable": false, "targets": 10 },
{ "width": "150px", "orderable": false, "targets": 11 }
];
var table = $('#activities-table').DataTable({
"searching": { "regex": true },
"bLengthChange": false,
"scrollY":"500px",
"scrollX":"300px",
"scrollCollapse": true,
"paging": false,
"autoWidth": false,
"processing": true,
"serverSide": true,
"autoWidth": true,
"ajax": {
url: "activities-data.php",
type: "POST",
"dataType": "json",
data: {salesman:salesman, startdate:startdate, enddate:enddate, supervisor:supervisor},
"complete": function(response) {
console.log(response);
}
},
"columnDefs": table,
"language": {
"emptyTable": "No data available in table",
"zeroRecords": "No data available in table",
"info": "Showing <b>_START_</b> to <b>_END_ of _TOTAL_</b> entries",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
search: "_INPUT_",
searchPlaceholder: "Search..."
},
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf'
]
});
And here is how I populate my data table using PHP
Note: This code will only return one(1) data
$salesman = $_POST["salesman"];
$supervisor = $_POST["supervisor"];
$startdate = $_POST["startdate"];
$enddate = $_POST["enddate"];
$request = $_REQUEST;
$whereCondition = "";
$sqlTotal = "";
$sqlRecord = "";
$columns = array(
0 => 'tblCaf.CAFNo',
1 => 'EmployeeName',
2 => 'CustomerName',
3 => 'ContactPerson',
4 => 'Activity',
5 => 'tblCaf.ActivityDate',
6 => 'tblCaf.StartTime',
7 => 'tblCaf.EndTime',
8 => 'tblCaf.StartLocation',
9 => 'tblCaf.EndLocation',
10 => 'tblCaf.OtherConcern',
11 => 'tblCaf.Remarks'
);
if(!empty($request['search']['value'])){
$whereCondition .= " AND
(tblCaf.CAFNo LIKE '%".$request['search']['value']."%'
OR EmployeeName.FileAs LIKE '%".$request['search']['value']."%'
OR CustomerName.FileAs LIKE '%".$request['search']['value']."%'
OR ContactPerson.FileAs LIKE '%".$request['search']['value']."%')";
}
$sql = "SELECT TOP 50 EmployeeName.FileAs AS Emp, CustomerName.FileAs AS CUS, ContactPerson.FileAs AS CP, tblCaf.CAFNo, tblCaf.CAFDate, tblCaf.StartTime, tblCaf.EndTime, tblCAF.StartLocation, tblCAF.EndLocation, tblCaf.OtherConcern, tblCaf.Remarks
FROM tblCaf
LEFT OUTER JOIN tblContacts AS EmployeeName ON EmployeeName.ContactID = tblCaf.EmployeeID
LEFT OUTER JOIN tblContacts AS CustomerName ON CustomerName.ContactID = tblCaf.CustomerID
LEFT OUTER JOIN tblContacts AS ContactPerson ON ContactPerson.ContactID = tblCaf.ContactPersonID
LEFT OUTER JOIN tblSalesmanSupervisor ON tblSalesmanSupervisor.SalesmanID = tblCaf.EmployeeID
WHERE tblCaf.CAFDate BETWEEN :start AND :end";
$sqlTotal .= $sql;
$sqlRecord .= $sql;
if(isset($whereCondition) && $whereCondition != ""){
$sqlTotal .= $whereCondition;
$sqlRecord .= $whereCondition;
}
if($db_conn == "MYSQL"){
$sqlRecord .= " ORDER BY ". $columns[$request['order'][0]['column']] ." " . $request["order"][0]['dir'] . " LIMIT " . $request["start"] . " ," . $request["length"]. " ";
$sqlTotal .= " LIMIT 50";
}
else{
$sqlRecord .= " ORDER BY ". $columns[$request['order'][0]['column']] ." " . $request["order"][0]['dir'];
}
$resultTotal = $conn->prepare($sqlTotal, $cursor);
$resultTotal->bindValue(":start", $startdate);
$resultTotal->bindValue(":end", $enddate);
$resultTotal->execute();
$totalData = $resultTotal->rowCount();
$resultRecords = $conn->prepare($sqlRecord, $cursor);
$resultRecords->bindValue(":start", $startdate);
$resultRecords->bindValue(":end", $enddate);
$resultRecords->execute();
$data = array();
$activities = "";
$i = 1;
$subdata = array();
if($totalData > 0){
while($row = $resultRecords->fetch()){
$subdata[] = $row["CAFNo"];
$subdata[] = strtoupper($row["Emp"]);
$subdata[] = strtoupper($row["CUS"]);
$subdata[] = strtoupper($row["CP"]);
$multiplesql = $conn->prepare("SELECT ActivityID FROM tblCafActivity WHERE CAFNo = :caf", $cursor);
$multiplesql->bindValue(":caf", $row["CAFNo"]);
$multiplesql->execute();
$multiplecount = $multiplesql->rowCount();
if($multiplecount > 0){
while($multiplerow = $multiplesql->fetch()){
$activitysql = $conn->prepare("SELECT ActivityDescription FROM tblActivity WHERE ActivityID = :act", $cursor);
$activitysql->bindValue(":act", $multiplerow["ActivityID"]);
$activitysql->execute();
$activitycount = $activitysql->rowCount();
if($activitycount > 0){
while($activityrow = $activitysql->fetch()){
$activities = strtoupper($activityrow["ActivityDescription"]) . "<br/>";
}
}
}
}
$subdata[] = $activities;
$subdata[] = date("F j, Y", strtotime($row['CAFDate']));
$subdata[] = date("h:i:s a", strtotime($row['StartTime']));
if(empty($row['EndTime'])){
$subdata[] = "";
}
else {
$subdata[] = date("h:i:s a", strtotime($row['EndTime']));
}
$subdata[] = $row['StartLocation'];
$subdata[] = $row['EndLocation'];
$subdata[] = strtoupper($row["OtherConcern"]);
$subdata[] = strtoupper($row["Remarks"]);
$data[] = $subdata;
}
}
$json_data = array(
"draw" => intval($request['draw']),
"recordsTotal" => intval($totalData),
"recordsFiltered" => intval($totalData),
"data" => $data
);
print json_encode($json_data);

Answer 1

You variable name for columns and table is same i.e "table". table is being called inside data-table initialization as well. Chanege the variable name for columnDefs to something else.
var columns= [
{ "width": "80px", "targets": 0 },
{ "width": "120px", "targets": 1 },
{ "width": "120px", "targets": 2 },
{ "width": "120px", "targets": 3 },
{ "width": "120px", "orderable": false, "targets": 4 },
{ "width": "120px", "targets": 5 },
{ "width": "100px", "targets": 6 },
{ "width": "110px", "targets": 7 },
{ "width": "150px", "orderable": false, "targets": 8 },
{ "width": "150px", "orderable": false, "targets": 9 },
{ "width": "150px", "orderable": false, "targets": 10 },
{ "width": "150px", "orderable": false, "targets": 11 }
];
var table = $('#activities-table').DataTable({
"searching": { "regex": true },
"bLengthChange": false,
"scrollY":"500px",
"scrollX":"300px",
"scrollCollapse": true,
"paging": false,
"autoWidth": false,
"processing": true,
"serverSide": true,
"autoWidth": true,
"ajax": {
url: "activities-data.php",
type: "POST",
"dataType": "json",
data: {salesman:salesman, startdate:startdate, enddate:enddate, supervisor:supervisor},
"complete": function(response) {
console.log(response);
}
},
"columnDefs": columns,
"language": {
"emptyTable": "No data available in table",
"zeroRecords": "No data available in table",
"info": "Showing <b>_START_</b> to <b>_END_ of _TOTAL_</b> entries",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
search: "_INPUT_",
searchPlaceholder: "Search..."
},
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'pdf'
]
});

Answer 2

Try putting this code before your ajax call.
"destroy": true
read more on destroy here: link: https://datatables.net/reference/option/destroy
or if it fails, add this
"retrieve": true
link: https://datatables.net/reference/option/retrieve