使用 List.js 对存储在 ID 上的数据进行排序
Sorting data stored on ID's with List.js
问题
List.js 没有正确排序我的 HTML-Table 上的数字。发生这种情况是因为我在数字位置使用 inner-HTML,如果我只输入数字而不是 ID,排序工作正常。
Why not just put the numbers on the table like you said?
我承认这是最好的解决方案,它提高了性能并且不使用任何 javascript,但是 :
一天要修改几次数据
我打算在其他地方也使用和显示数据,而不仅仅是 table。
因此,修改我所有 HTML 页面上的数据很痛苦,在那里我只能修改 .js 和它们,所有 HTML 都会更新.
我想要的:
使按钮 "Numbers" 正确排序每个按钮内的数据:
document.getElementById("mushroom_N").innerHTML = "some_number";
而不是实际的 ID 名称。 (在这种情况下,每个 "mushroom_N")
条件:
使用 List.js 而不是其他插件的解决方案。
我没有使用 jQuery,理想的解决方案是不使用它。
如果您愿意,我的代码在 codepen 上 HERE。
感谢您的关注!
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>
太好了,我做到了!
您只需要创建一个数组并将元素放入另一个数组中。 Codepen 给有兴趣或遇到我同样问题的人。
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>
问题
List.js 没有正确排序我的 HTML-Table 上的数字。发生这种情况是因为我在数字位置使用 inner-HTML,如果我只输入数字而不是 ID,排序工作正常。
Why not just put the numbers on the table like you said?
我承认这是最好的解决方案,它提高了性能并且不使用任何 javascript,但是 :
一天要修改几次数据
我打算在其他地方也使用和显示数据,而不仅仅是 table。
因此,修改我所有 HTML 页面上的数据很痛苦,在那里我只能修改 .js 和它们,所有 HTML 都会更新.
我想要的:
使按钮 "Numbers" 正确排序每个按钮内的数据:
document.getElementById("mushroom_N").innerHTML = "some_number";
而不是实际的 ID 名称。 (在这种情况下,每个 "mushroom_N")
条件:
使用 List.js 而不是其他插件的解决方案。
我没有使用 jQuery,理想的解决方案是不使用它。
如果您愿意,我的代码在 codepen 上 HERE。
感谢您的关注!
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>
太好了,我做到了!
您只需要创建一个数组并将元素放入另一个数组中。 Codepen 给有兴趣或遇到我同样问题的人。
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>