Anybody know of a plugin, or a built in function to make the columns in a table sortable? i.e. I click on the column header and it sorts the rows by that column?
Asked
Active
Viewed 2.0k times
7 Answers
27
http://tablesorter.com/docs/ is very simple to use with a wide range of options to suit your needs. :)
Mike
- 4,257
- 3
- 33
- 47
-
tablesorter! -- http://stackoverflow.com/a/9535584/665387 has link and example video – Ravi Ram Mar 02 '12 at 15:31
3
Flexigrid is a very popular, and easy table manager/sorter to use.
Kirk Woll
- 76,112
- 22
- 180
- 195
Remy Sharp
- 4,520
- 3
- 23
- 40
2
Here's two that sort and do many other things as well that I did not yet see listed :
Here is also a table comparing many data tables: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/
SeanDowney
- 17,368
- 20
- 81
- 90
0
A jquery plugin that makes sort, filter and pagination: breedjs
Example:
Put the data in a js object to do just like so:
var data = {
people: [
{name: 'a', address: 'c', salesperson: 'b'},
{name: 'b', address: 'b', salesperson: 'a'},
{name: 'c', address: 'a', salesperson: 'c'},
]
};
breed.run({
scope: 'people',
input: data
});
HTML:
<table>
<thead>
<tr>
<th sort='name'>Name</th>
<th sort='address'>Address</th>
<th sort='salesperson'>Sales Person</th>
</tr>
</thead>
<tbody>
<tr b-scope="people" b-loop="person in people">
<td b-sort="name">{{person.name}}</td>
<td b-sort="address">{{person.address}}</td>
<td b-sort="salesperson">{{person.salesperson}}</td>
</tr>
</tbody>
</table>
Now, everytime you want to sort by salesperson, just call it:
breed.sort({
scope: 'people',
selector: //field name
});
See:
$("th").click(function(){
breed.sort({
scope: 'people',
selector: $(this).attr('sort')
});
});
João Paulo
- 6,300
- 4
- 51
- 80
0
Multiple tables, different data types and no external libraries.
References:
- https://github.com/VFDouglas/HTML-Order-Table-By-Column/blob/main/index.html
- https://stackoverflow.com/a/72477957/6938902
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1 <span>↑</span></th>
<th>Column 2 <span>↑</span></th>
<th>Column 3 <span>↑</span></th>
<th>Column 4 <span>↑</span></th>
<th>Column 5 <span>↑</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>Product 22</td>
<td>ABCASD</td>
<td>22DDS</td>
<td>454645</td>
</tr>
<tr>
<td>99</td>
<td>Proddduct 12</td>
<td>AACASD</td>
<td>22DDS</td>
<td>354645</td>
</tr>
<tr>
<td>300</td>
<td>Product 22</td>
<td>AcCASD</td>
<td>32DDS</td>
<td>554649</td>
</tr>
<tr>
<td>400</td>
<td>Proooooooduct 22</td>
<td>AcdCASD</td>
<td>3d2DDS</td>
<td>554645</td>
</tr>
<tr>
<td>10</td>
<td>Product 1</td>
<td>cCASD</td>
<td>DDS</td>
<td>4645</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>Column 1 <span>↑</span></th>
<th>Column 2 <span>↑</span></th>
<th>Column 3 <span>↑</span></th>
<th>Column 4 <span>↑</span></th>
<th>Column 5 <span>↑</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>Product 221</td>
<td>ABCASD</td>
<td>22DDS</td>
<td>454645</td>
</tr>
<tr>
<td>99</td>
<td>Product 12</td>
<td>AACASD</td>
<td>22DDS</td>
<td>354645</td>
</tr>
<tr>
<td>300</td>
<td>Product 222</td>
<td>AcCASD</td>
<td>32DDS</td>
<td>554649</td>
</tr>
<tr>
<td>400</td>
<td>Product 22</td>
<td>AcdCASD</td>
<td>3d2DDS</td>
<td>554645</td>
</tr>
<tr>
<td>10</td>
<td>Product 11</td>
<td>cCASD</td>
<td>DDS</td>
<td>4645</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () { // After page loads
Array.from(document.getElementsByTagName("th")).forEach((element, index) => { // Table headers
element.addEventListener("click", function (event) {
let table = this.closest("table");
let order_icon = this.getElementsByTagName("span")[0];
let order = encodeURI(order_icon.innerHTML).includes("%E2%86%91") ? "desc" : "asc";
let value_list = {}; // <tr> Object
let obj_key = []; // Values of selected column
let separator = "-----"; // Separate the value of it's index, so data keeps intact
let string_count = 0;
let number_count = 0;
table.querySelectorAll("tbody tr").forEach((linha, index_line) => { // <tbody> rows
let key = linha.children[element.cellIndex].textContent.toUpperCase();
key.replace("-", "").match(/^[0-9,.]*$/g) ? number_count++ : string_count++; // Check if value is numeric or string
value_list[key + separator + index_line] = linha.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
obj_key.push(key + separator + index_line);
});
if (number_count > 0 && string_count <= 0) { // If all values are numeric
obj_key.sort(function(a, b) {
return a.split(separator)[0] - b.split(separator)[0];
});
}
else {
obj_key.sort();
}
if (order == "desc"){
obj_key.reverse();
order_icon.innerHTML = "↓";
}
else {
order_icon.innerHTML = "↑";
}
let html = "";
obj_key.forEach(function (chave) {
html += value_list[chave];
});
table.getElementsByTagName("tbody")[0].innerHTML = html;
});
});
}
</script>
</body>
</html>
Douglas Vicentini
- 132
- 2
- 11
