The Problem
List.js isn't properly sorting numbers on my HTML-Table. This is happening because I'm using inner-HTML on the place of numbers, sort works fine if I just put the numbers and not an ID.
Why not just put the numbers on the table like you said?
I admit that's the best solution, it gains on performance and don't use any javascript, BUT :
I need to modify the data a couple of times a day.
I intend to use and display the data in other places as well, and not just the table.
And in consequence, a pain to modify the data on all my HTML pages, where I could modify just the .js and them, all HTML would be updated.
What I want:
Make the button "Numbers" properly sort data inside of each:
document.getElementById("mushroom_N").innerHTML = "some_number";
and not the actual ID name. (in this case, each "mushroom_N")
Conditions:
A solution that uses List.js, and not a different plugin.
I'm not using jQuery, the ideal solution would be one that also don't use it.
My code is HERE on codepen if you prefer.
Thanks for your attention!
var options = {
valueNames: ['name', 'number']
};
var userList = new List('users', options);
function myFunction() {
document.getElementById("demo0").innerHTML = 10;
document.getElementById("demo1").innerHTML = 1000;
document.getElementById("demo2").innerHTML = 1;
document.getElementById("demo3").innerHTML = 100;
}.list {
font-family: sans-serif;
}
td {
padding: 10px;
border: solid 1px #eee;
}
input {
border: solid 1px #ccc;
border-radius: 5px;
padding: 7px 14px;
margin-bottom: 10px
}
input:focus {
outline: none;
border-color: #aaa;
}
.sort {
padding: 8px 30px;
border-radius: 6px;
border: none;
display: inline-block;
color: #fff;
text-decoration: none;
background-color: #f44336;
height: 30px;
}
.sort:hover {
text-decoration: none;
background-color: #b71c1c;
}
.sort:focus {
outline: none;
}
.sort:after {
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
position: relative;
top: -10px;
right: -5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
position: relative;
top: 4px;
right: -5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: "";
position: relative;
top: -4px;
right: -5px;
}<html>
<html lang="en">
<head>
</head>
<body onload="myFunction()">
<div id="users">
<!-- "Search" -->
<input class="search" placeholder="Search" />
<!-- "Sort Buttons" -->
<button class="sort" data-sort="name">A -> Z</button>
<button class="sort" data-sort="number">Numbers</button>
<!-- "The List" -->
<ul class="list">
<li>
<h3 class="name">Mario</h3>
<span class="number"><p id="demo3"></p></span>
</li>
<li>
<h3 class="name">Luigi</h3>
<span class="number"><p id="demo1"></p></span>
</li>
<li>
<h3 class="name">Peach</h3>
<span class="number"><p id="demo2"></p></span>
</li>
<li>
<h3 class="name">Toad</h3>
<span class="number"><p id="demo0"></p></span>
</li>
</ul>
</div>
<!-- "List.js" -->
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
</body>
</html>
Welp, I did it!
You just need to create an array and put the elements inside of another one. The Codepen for someone interested or having the same problem of mine.