javascript - JavaScript 通过选择选项对表数据进行排序
问题描述
我正在从 JSON 文件中获取数据并将其呈现到表格中,但我需要使用选择选项按评级和投票对其进行排序,但我尝试了不同的方法,但它们都不起作用。
这是我的代码的链接:https ://jsfiddle.net/natefr0st/596ew8zc/5/
我尝试使用 querySelectorAll 获取评级并遍历每个评级然后对其进行排序但它没有用,尝试了其他不同的方法并再次没有结果
const sortMenu = document.getElementById('sort');
sortMenu.addEventListener('change', sortTable);
function sortTable() {
const rating = document.querySelectorAll('.rating')
// rating.forEach((val, i) => console.log(val.innerHTML));
// function compare(a, b) {
// return a.imdb_rating > b.imdb_rating ? 1 : -1;
// }
if(sortMenu.value == 1) {
rating.forEach(function(val, index) {
let ratingArr = Array.from(val.innerHTML);
return ratingArr.sort();
});
}
}
解决方案
使用下面的代码库。仅供参考,我已经在你的小提琴中测试过了。
let movies = [];
const url = 'url';
$.getJSON(url, (data) => {
start(data, true)
});
function start(data, init=false) {
movies = data
displayMovies();
if (init) {
setPages();
}
}
// Render 10 Rows Per Page
// ========================
function displayMovies(page = 1) {
let movie_data = '';
let max = page * 10;
let min = max - 10;
for (let i = min; i < max; i++) {
let movie = movies[i];
if (movie) {
movie_data += `<tr class="movie-row">
<td scope="row">${movie.id}</td>
<td>${movie.title}</td>
<td>${movie.director}</td>
<td>${movie.distributor}</td>
<td class="rating">${movie.imdb_rating}</td>
<td class="votes">${movie.imdb_votes}</td>
<td><button type="button" class="btn btn-danger">Delete</button></td>
</tr>`;
} else {
break;
}
}
$('#movies').html(movie_data);
}
// Render Pagination Buttons to the Table
// =======================================
function setPages() {
let nbPages = Math.ceil(movies.length / 10);
let pages = '';
for (let i = 1; i <= nbPages; i++) {
pages +=
'<button class="btn btn-outline-info page-btn" type="button" page="' + i + '">Page ' + i + '</button>';
}
$('#pages').append(pages);
$('.page-btn').click(function () {
displayMovies($(this).attr('page'));
});
}
// Sort Table TODO
// ================
const sortMenu = document.getElementById('sort');
sortMenu.addEventListener('change', sortTable);
function sortTable() {
switch(parseInt(sortMenu.value)) {
case 1:
movies.sort((a, b) => (a.imdb_votes - b.imdb_votes));
start(movies);
break;
case 2:
movies.sort((a, b) => (b.imdb_votes - a.imdb_votes));
start(movies);
break;
case 3:
movies.sort((a, b) => (a.imdb_rating - b.imdb_rating));
start(movies);
break;
case 4:
movies.sort((a, b) => (b.imdb_rating - a.imdb_rating));
start(movies);
break;
default:
break;
}
}
推荐阅读
- node.js - Nodejs内存泄漏-在chrome调试中拍摄快照后内存分配减少
- c# - 如何获得 2 个 false 布尔值并返回 true 作为结果
- spring-boot - SpringBoot应用请求ElasticSearch时,是否可以将所有索引数据搜索的Fuzzy参数设置为app参数?
- javascript - 如何结合 Node.js 和浏览器控制台?
- c - 您如何使用 accelstepper arduino 库移动指定数量的步骤,检查外部输入,然后继续?
- javascript - onclick html 属性没有做任何事情
- parse-platform - 有没有办法在 Parse Object 保存后不执行 afterSave Cloud Code 处理程序?
- aes - 在程序中使用密码最安全的方法是什么
- node.js - 如何在同一函数中查询 SELECT 然后 UPDATE
- android - Trouble managing Soft bottom bars in Android for different devices