JavaScript 通过 Select 选项对表数据进行排序

Question

我正在从 JSON 文件中获取数据并将其呈现到表格中，但我需要使用 select 选项按评级和投票对其进行排序，但我尝试了不同的方法，但它们都没有奏效。

这是我的代码的链接： 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();
        });
    } 
}

Answer 1

使用下面的代码库。 仅供参考，我已经在你的小提琴中测试过了。

    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;
        }
    }

Answer 2

为什么不通过下面的使用让你的生活变得轻松。

让 jquery 数据表插件为您生成 html 您正在创建自己，如果下面的链接满足您的要求，这是最好的方法。

https://datatables.net/examples/data_sources/js_array.html