Sorting data stored on ID's with List.js
Question
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>
1 answers
solution1
0 ACCPTED 2018-06-09 15:08:46
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.
var mushs = [ "100", // Mario "10", // Luigi "1000", // Peach "1" // Toad // A change in the values will affect all places at the same time. ]; var options = { valueNames: ['name', 'mushrooms'], item: '<tr><td class="mdl-data-table__cell--non-numeric name"></td><td class="mushrooms"></td></tr>' }; var values = [{ name: 'Mario', mushrooms: mushs[0] }, { name: 'Luigi', mushrooms: mushs[1] }, { name: 'Peach', mushrooms: mushs[2] }, { name: 'Toad', mushrooms: mushs[3] } ]; var userList = new List('users', options, values); document.getElementById("mushroom_0").innerHTML = mushs[0]; document.getElementById("mushroom_1").innerHTML = mushs[1]; document.getElementById("mushroom_2").innerHTML = mushs[2]; document.getElementById("mushroom_3").innerHTML = mushs[3];
body { margin: 0; padding: 20px; } input { border: solid 1px #ccc; border-radius: 5px; padding: 7px 14px; margin-bottom: 10px } input:focus { outline: none; border-color: #aaa; }
<div id="users"> <input class="search" placeholder="Search"> <table class="mdl-data-table mdl-js-data-table"> <div id="mdl-table"> <thead> <tr> <th class="mdl-data-table__cell--non-numeric"> <button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="name"> <i class="mdl-color-text--red-500 material-icons">sort_by_alpha</i> </button> </th> <th> <button class="mdl-button mdl-js-button mdl-button--icon sort" data-sort="mushrooms"> <i class="mdl-color-text--red-500 material-icons">swap_vertical_circle</i> </button> </th> </tr> </thead> <tbody class="list"></tbody> </div> </table> </div> <p></p> <div>Hey, I know that Mario got <span id="mushroom_0"></span> mushrooms, also, Luigi got <span id="mushroom_1"></span> of them, Peach was greed and got at least <span id="mushroom_2"></span> mushs, and Toad got only <span id="mushroom_3"></span>, himself.</div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/material.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/javve/list.js@1.5.0/dist/list.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.