@smokey01
I think we have it now. Can you test with a real database?
What must be fixed still is the logic to determine if a row has the <th> tag 
I combined the CSS back into contact8.php for ease of tuning it. It can be separated out to an external css file at some point.
The fix was to add an additional if conditional statement to test if the filtered row (TR) contains the TH tags which when true sets FLAG = true .
So in the following rewrite of the table rows (during filtering), the test conditional can determine whether the FLAG is set to true or false so the next row is displayed or hidden (Lines 186-188).
contact8.php
Code: Select all
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<style type="text/css">
body {
background-color: lightgrey;
margin: 0;
padding: 2rem;
}
table {
border-collapse: "";
}
th {
cursor: pointer;
background-color: lightgreen;
width:150px;
padding: 0.25rem;
position: sticky;
top: 0;
}
div.box {
background-color:#f8f8f8;
max-width:805px;
margin:20px auto 50px;
padding:50px;
border-radius:10px;
border:1px solid #808080;
box-shadow:8px 15px 20px #404040
overflow: auto;
}
.box1 {
background-color:#f8f8f8;
max-width:25%;
margin:10px auto 50px;
padding:20px;
border-radius:10px;
border:1px solid #808080;
box-shadow:8px 15px 20px #404040
}
tr td {
padding: 0.25rem;
}
</style>
</head>
<body>
<div class="box1">
<tr>
<th><input size=33px type="text" id="FirstName" name="FirstName" placeholder="Filter" onkeyup="filterTable()"></th>
</tr>
</div>
<div class="box">
<table id="main-table" border = "3">
<col span="5" style="background-color:cyan">
<tr>
<th onclick="comparer(0)">ID</th>
<th onclick="comparer(1)">First Name</th>
<th onclick="comparer(2)">Last Name</th>
<th onclick="comparer(3)">Mobile</th>
<th onclick="comparer(4)">Email</th>
</tr>
<?php
$ID = 6; //set variable ID to 6
class MyDB extends SQLite3
{
function __construct()
{
$this->open('sample2.sqlite');
}
}
$db = new MyDB();
if(!$db){
echo $db->lastErrorMsg();
} else {
}
$sql =<<<EOF
SELECT * FROM Details WHERE ID = ID;
EOF;
$ret = $db->query($sql);
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
//echo "" . $row['ID']," ", $row['options'] . "<br> \n"; // needs <br> for browser
echo "<tr><td>".$row['ID']."</td>";
echo "<td>".$row['FirstName']."</td>";
echo "<td>".$row['LastName']."</td>";
echo "<td>".$row['Mobile']."</td>";
echo "<td>".$row['Email']."</td></tr>";
}
$db->close();
?>
</table>
</div>
</div>
<script type=text/javascript>
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
})));
var table = document.getElementById('main-table');
var input = document.getElementById('FirstName');
var tableData = [];
$("table#main-table tr").each(function() {
var rowDataArray = [];
var actualData = $(this).find('td');
if (actualData.length > 0) {
actualData.each(function() {
rowDataArray.push($(this).text());
});
tableData.push(rowDataArray);
}
});
console.log(tableData);
function populateTable() {
table.innerHTML = '';
for (let data of tableData) {
let row = table.insertRow(-1);
let ID = row.insertCell(0);
ID.innerHTML = data.ID;
let FirstName = row.insertCell(1);
FirstName.innerHTML = data.FirstName;
let LastName = row.insertCell(2);
LastName.innerHTML = data.LastName;
let Mobile = row.insertCell(3);
Mobile.innerHTML = data.Mobile;
let Email = row.insertCell(4);
Email.innerHTML = data.Email;
}
filterTable();
}
function filterTable() {
let filter = input.value.toUpperCase();
rows = table.getElementsByTagName("TR");
let flag = false;
for (let row of rows) {
let cells = row.getElementsByTagName("TD");
for (let cell of cells) {
if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
if (filter) {
cell.style.backgroundColor = 'yellow';
} else {
cell.style.backgroundColor = '';
}
flag = true;
} else {
cell.style.backgroundColor = '';
}
}
if (row.getElementsByTagName("TH")) {
flag = true;
}
if (flag) {
row.style.display = "";
} else {
row.style.display = "none";
}
flag = false;
}
}
populateTable();
</script>
</body>
</html>
Now for the arrow to show sort ascending or descending 
