I'm using CodeIgniter to retrieve a count of data in my table with thier respective agent name. I'm doing this by using the following statement:
$sql = SELECT count(*) AS cnt
FROM table 1 t LEFT JOIN user_table c ON t.agent_id = c.id
GROUP BY COALESCE(t.agent_id, 0), c.display_name
ORDER BY c.display_name IS NULL, c.display_name;
$query = $this->db->query($sql);
return $query;
And this has given me the following output giving the table data from A-Z in terms of the name:
Now I want to be able to filter this data in ASC and DESC order when I click on thier headings of the table. Here is the code I have for my table:
<thead>
<tr>
<th><div onclick=//Some method>Agent</div></th>
<th><div onclick=//Some method>Count</div></th>
</tr>
</thead>
<?php
if(isset($agent_count) && count($agent_count) > 0)
{
foreach($agent_count as $row ){
?>
<tr>
<td><?= $row->name ?></td>
<td><?= $row->cnt ?></td>
</tr>
<?php } } ?>
So here to order the data, I'm assuming an AJAX call needs to be made to order the data in DESC if it already is ASC or to ASC if it is already DESC. Also if I click on the count heading to get that data in DESC order, then the Agent column should also sort accordingly to its respective data.
CodePudding user response：
You can achieve the same using javascript. There is no need to do another ajax call. You can just get the data once from the server and then using javascript to sort the table.
Source: Sort a HTML table on header click
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i ) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.match(/^-?\d $/) && y.innerHTML.match(/^-?\d $/)) {
if (Number(x.innerHTML) > Number(y.innerHTML)) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (x.innerHTML.match(/^\d \.\d $/) && y.innerHTML.match(/^\d \.\d $/)) {
if (Number(x.innerHTML) > Number(y.innerHTML)) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
} else if (dir == "desc") {
if (x.innerHTML.match(/^-?\d $/) && y.innerHTML.match(/^-?\d $/)) {
if (Number(x.innerHTML) < Number(y.innerHTML)) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (x.innerHTML.match(/^\d \.\d $/) && y.innerHTML.match(/^\d \.\d $/)) {
if (Number(x.innerHTML) < Number(y.innerHTML)) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
} <!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
</head>
<body>
<table id="myTable">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
<th onclick="sortTable(2)">Count</th>
<th onclick="sortTable(3)">Rating</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
<td>5</td>
<td>4.5</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
<td>1</td>
<td>2.8</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
<td>78</td>
<td>0.9</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
<td>5</td>
<td>4.5</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
<td>7</td>
<td>1.3</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
<td>0</td>
<td>1.2</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
<td>2</td>
<td>3.5</td>
</tr>
</table>
</body>
</html>