OK, here it is and sorry for the delay I had to dust some cobwebs off.
Here’s the main file I named sortDatabase.php (I should had named it sortTable lol)
[php]
Sort by ASC
Sort by DESC
<script>
var ascBtn = document.getElementById('asc');
var descBtn = document.getElementById('desc');
var status = "ASC";
sortTable(status);
ascBtn.addEventListener('click', function (e) {
e.preventDefault();
status = "ASC";
sortTable(status);
});
descBtn.addEventListener('click', function (e) {
e.preventDefault();
status = "DESC";
sortTable(status);
});
function sortTable(status) {
var check = "status=" + status; // Put it in $_POST Format:
//console.log(check);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
//console.log('readyState: ' + xhr.readyState, 'xhr.status: ' + xhr.status);
if (xhr.readyState === 2) {
//console.log(xhr.status);
if (xhr.status === 410) {
}
}
if (xhr.readyState === 4 && xhr.status === 200) {
var info = JSON.parse(xhr.responseText);
for (var x = 0; x <= info.length; x++) {
console.log(info[x].Name);
}
}
}; // End of Ready State:
xhr.open('POST', 'result.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(check);
}</script>
</body>
[/php]
and here’s a separate file that retrieves the data from the result.php file:
[php]<?php
include ‘connection.php’;
/* Makes it so we don’t have to decode the json coming from JavaScript */
header(‘Content-type: application/json’);
$check = filter_input(INPUT_POST, ‘status’, FILTER_SANITIZE_FULL_SPECIAL_CHARS); // Grab The Post
/* Retrieving Data using PDO /
function retreiveData($sql) {
$db_options = [
/ important! use actual prepared statements (default: emulate prepared statements) /
PDO::ATTR_EMULATE_PREPARES => false
/ throw exceptions on errors (default: stay silent) /
, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
/ fetch associative arrays (default: mixed arrays) */
, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
];
$pdo = new PDO('mysql:host=' . DATABASE_HOST . ';dbname=world;charset=utf8', DATABASE_USERNAME, DATABASE_PASSWORD, $db_options);
$stmt = $pdo->prepare($sql); // Prepare the query:
$stmt->execute(); // Execute the query with the supplied user's parameter(s):
$data = $stmt->fetchAll(PDO::FETCH_OBJ);
return $data;
}
if ($check === “ASC”) {
$sql = ‘SELECT Name, Continent, Population FROM country ORDER BY Name ASC’;
} else {
$sql = ‘SELECT Name, Continent, Population FROM country ORDER BY Name DESC’;
}
$data = retreiveData($sql);
$output = $data;
output($output);
/*
- Set error code then send message to Ajax / JavaScript
*/
function errorOutput($output, $code = 500) {
http_response_code($code);
echo json_encode($output);
}
/*
- If everything validates OK then send success message to Ajax / JavaScript
*/
function output($output) {
http_response_code(200);
echo json_encode($output);
}
[/php]
I didn’t do any HTML or CSS, but if I were doing this I would do the HTML in the result.php file and just output it to sortDatabase.php in XML format or something that wouldn’t use innerHTML.
HTH John
P.S. I just used the world database table country just to see what I was coding worked.