Проблема
List.js неправильно сортирует числа в моей HTML-таблице.Это происходит потому, что я использую внутренний HTML вместо чисел, сортировка работает хорошо, если я просто ставлю цифры, а не ID.
Почему бы просто не поставить цифры натаблица, как вы сказали?
Я признаю, что это лучшее решение, оно повышает производительность и не использует JavaScript, НО:
Мне нужно изменять данные пару раз в день.
Я собираюсь использовать и отображать данные и в других местах, а не только вТаблица.
И, как следствие, боль изменить данные на всех моих HTML-страницах, где я мог изменить только .js и их, весь HTML будет обновлен.
Что я хочу:
Сделайте так, чтобы кнопка «Числа» правильно сортировала данные внутри каждого:
document.getElementById("mushroom_N").innerHTML = "some_number";
, а не фактическое имя ID,(в данном случае, каждый «mushroom_N»)
Условия:
Решение, которое использует List.js , а недругой плагин.
Я не использую jQuery, идеальным решением будет тот, который также не использует его.
Мой код ЗДЕСЬ на коде, если вы предпочитаете.
Спасибо за ваше внимание!
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>