JavaScript Sort Table Data via Select Options

Question

I am fetching data from a JSON file and rendering it to a table, but I need to sort it by ratings and votes with select options I've tried different ways but none of them worked.

This is a link to my code: https://jsfiddle.net/natefr0st/596ew8zc/5/

I've tried to get the ratings with querySelectorAll and loop through each rating and then sort it but it didn't work, tried other different methods and again without result

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

Jing Yu · Accepted Answer · 2019-11-12 12:35:19Z

1

Use below code base. FYI, I have tested it in your fiddle.

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

edited Nov 12, 2019 at 12:35

answered Nov 12, 2019 at 12:25

Jing Yu

1,63113 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kevin Zino Over a year ago

Oh but now renders the buttons for the pagination onchange many times :/

Jing Yu Over a year ago

Done. please check.

Jing Yu Over a year ago

FYI, I have added init flag in start function.

Kevin Zino Over a year ago

Thanks a lot but can you explain it plz :}

Jing Yu Over a year ago

Yes. Best way to sort it in your case is to sort array before init table. And when init table, setPages function is called only one time with status value of init flag.

|

karim full stack · Accepted Answer · 2019-11-12 12:28:40Z

0

Why dont you make your life easy by just using below.

Let jquery datatable plugin generate html for you you are creating your self, if below link fulfill your requirements this is best way.

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

edited Nov 12, 2019 at 12:28

answered Nov 12, 2019 at 12:14

karim full stack

14 bronze badges

2 Comments

Kevin Zino Over a year ago

I am not allowed to use such tools

karim full stack Over a year ago

Ok in this case you have to add a row above TH of your columns with drop-down having on change click..on selected item change just call api again with order by selected value.

Collectives™ on Stack Overflow

JavaScript Sort Table Data via Select Options

2 Answers 2

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related