JQuery Ajax - Order works on 1 field lesser - php

Question

I am new beginer in jquery/ajax, working on a simple Ajax / Jquery html table - MySql. Everything works except 'Click to order' a field. Upon clicking a column heading (expecting to get ordered on this field), it gets ordered on the previous column/field. I made some adjustments, but still the same. The original codes were received from phpzag.com.
<?php
include('inc/header.php');
?>
<title>phpzag.com : Demo Live Add Edit Delete datatables Records with Ajax, PHP and MySQL</title>
<?php //include('inc/container.php');
$Col0 = "id";
$Col1 = "Topic";
$Col2 = "FileName";
$Col3 = "Size";
$Col4 = "Created";
$Col5 = "Modified";
$Col6 = "Folder";
?>
<div class="container contact">
<h2>Example: Live Add Edit Delete datatables Records with Ajax, PHP and MySQL</h2>
<div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
<div class="panel-heading">
<div class="row">
<div class="col-md-10">
<h3 class="panel-title"></h3>
</div>
<div class="col-md-2" align="right">
<!--- <button type="button" name="add" id="addRecord" class="btn btn-success">Add New Record</button> <!-- Original--->
<button type="button" name="add" id="addRtf" class="btn btn-success">Add New WordPad</button> <!--- Manoj --->
</div>
</div>
</div>
<table id="recordListing" class="table table-bordered table-striped"> <!-- ManojComment View page + update/close button --->
<thead>
<tr>
<!---<th>#</th> --->
<!---<th><?php //echo $Col0; ?></th> --->
<th><?php echo $Col1; ?></th>
<th><?php echo $Col2; ?></th>
<th><?php echo $Col3; ?></th>
<th><?php echo $Col4; ?></th>
<th><?php echo $Col5; ?></th>
<th><?php echo $Col6; ?></th>
<th>#</th>
<!--- <th></th> //Manoj removed - avoid del/update buttona
<th></th> -->
<th></th>
</tr>
</thead>
</table>
</div>
<div id="recordModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="recordForm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-plus"></i> Edit Record</h4>
</div>
<div class="modal-body"> <!--- ManojComment EDIT modal page --->
<div class="form-group">
<label for="<?php echo $Col0; ?>" class="control-label"><?php echo $Col0; ?></label>
<input type="text" class="form-control" id="<?php echo $Col0; ?>" name="<?php echo $Col0; ?>" placeholder="<?php echo $Col0; ?>" required>
</div>
<div class="form-group">
<label for="<?php echo $Col1; ?>" class="control-label"><?php echo $Col1; ?></label>
<input type="text" class="form-control" id="<?php echo $Col1; ?>" name="<?php echo $Col1; ?>" placeholder="<?php echo $Col1; ?>" required>
</div>
<div class="form-group">
<label for="<?php echo $Col2; ?>" class="control-label"><?php echo $Col2; ?></label>
<input type="number" class="form-control" id="<?php echo $Col2; ?>" name="<?php echo $Col2; ?>" placeholder="<?php echo $Col2; ?>">
</div>
<div class="form-group">
<label for="<?php echo $Col3; ?>" class="control-label"><?php echo $Col3; ?></label>
<input type="text" class="form-control" id="<?php echo $Col3; ?>" name="<?php echo $Col3; ?>" placeholder="<?php echo $Col3; ?>" required>
</div>
<div class="form-group">
<label for="<?php echo $Col4; ?>" class="control-label"><?php echo $Col4; ?></label>
<textarea class="form-control" rows="5" id="<?php echo $Col4; ?>" name="<?php echo $Col4; ?>"></textarea>
</div>
<div class="form-group">
<label for="<?php echo $Col5; ?>" class="control-label"><?php echo $Col5; ?></label>
<input type="text" class="form-control" id="<?php echo $Col5; ?>" name="<?php echo $Col5; ?>" placeholder="<?php echo $Col5; ?>">
</div>
<div class="form-group">
<label for="<?php echo $Col6; ?>" class="control-label"><?php echo $Col6; ?></label>
<input type="text" class="form-control" id="<?php echo $Col6; ?>" name="<?php echo $Col6; ?>" placeholder="<?php echo $Col6; ?>">
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="action" id="action" value="" />
<input type="submit" name="save" id="save" class="btn btn-info" value="Save" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
<?php include('inc/footer.php');?>
Ajax_action.php
<?php
include_once 'config/Database.php';
include_once 'class/Records.php';
$database = new Database();
$db = $database->getConnection();
$record = new Records($db);
if(!empty($_POST['action']) && $_POST['action'] == 'listRecords') {
$record->listRecords();
}?>
Database.php
<?php
class Database{
private $host = 'localhost';
private $user = 'root';
private $password = "dd";
private $database = "dd";
public function getConnection(){
$conn = new mysqli($this->host, $this->user, $this->password, $this->database);
if($conn->connect_error){
die("Error failed to connect to MySQL: " . $conn->connect_error);
} else {
return $conn;
}
}
}
Ajax.js
$(document).ready(function(){
var dataRecords = $('#recordListing').DataTable({
"lengthChange": false,
"processing":true,
"serverSide":true,
'processing': true,
'serverSide': true,
'serverMethod': 'post',
"order":[],
"ajax":{
url:"ajax_action.php",
type:"POST",
data:{action:'listRecords'},
dataType:"json"
},
/*"columnDefs":[
{
"targets":[0, 6, 7],
"orderable":false,
},
],*/
"pageLength": 100
});
Records.php
class Records {
private $recordsTable = 'files';
public $id;
public $Topic;
public $FileName;
public $Size;
public $Created;
public $Modified;
public $Folder;
private $conn;
public function __construct($db){
$this->conn = $db;
}
public function listRecords(){
$Col0 = "id";
$Col1 = "Topic";
$Col2 = "FileName";
$Col3 = "Size";
$Col4 = "Created";
$Col5 = "Modified";
$Col6 = "Folder";
$sqlQuery = "SELECT * FROM ".$this->recordsTable." ";
if(!empty($_POST["search"]["value"])){
$sqlQuery .= 'where('.$Col0.' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col1 .' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col2 .' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col3 .' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col4 .' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col5 .' LIKE "%'.$_POST["search"]["value"].'%" ';
$sqlQuery .= ' OR '.$Col6 .' LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(!empty($_POST["order"])){
$sqlQuery .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
} else {
$sqlQuery .= 'ORDER BY id DESC ';
}
if($_POST["length"] != -1){
$sqlQuery .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$stmt = $this->conn->prepare($sqlQuery);
$stmt->execute();
$result = $stmt->get_result();
$stmtTotal = $this->conn->prepare("SELECT * FROM ".$this->recordsTable);
$stmtTotal->execute();
$allResult = $stmtTotal->get_result();
$allRecords = $allResult->num_rows;
$displayRecords = $result->num_rows;
$records = array();
while ($record = $result->fetch_assoc()) {
$rows = array();
//$rows[] = ucfirst($record[$Col1]);//original
$rows[] = $record[$Col1];//manoj as order not working properly, test
$rows[] = $record[$Col2];
$rows[] = $record[$Col3];
$rows[] = $record[$Col4];
$rows[] = $record[$Col5];
$rows[] = $record[$Col6];
$rows[] = $record[$Col0];
//$rows[] = '<button type="button" name="update" id="'.$record["id"].'" class="btn btn-warning btn-xs update">Update</button>'; //original
//$rows[] = '<button type="button" name="delete" id="'.$record["id"].'" class="btn btn-danger btn-xs delete" >Delete</button>'; //Original
$rows[] = '<button type="button" name="open" id="'.$record["id"].'" class="btn btn-warning btn-xs open" >Open</button>';
$records[] = $rows;
}
$output = array(
"draw" => intval($_POST["draw"]),
"iTotalRecords" => $displayRecords,
"iTotalDisplayRecords" => $allRecords,
"data" => $records
);
echo json_encode($output);
}