Таблица сортировки JavaScript через выпадающий список

Question

Я динамически отображал таблицу из данных JSON и хочу отсортировать таблицу по голосам и оценкам (по возрастанию / убыванию) с помощью раскрывающегося списка, но я не уверен, как ... Я пробовал несколько разных способов, ноЯ всегда терплю неудачу.

                <label for="sort">Sort</label><br>
                <select name="sort" id="sort">
                    <option value="0" selected>Order By</option>
                    <option value="1">Votes Ascending</option>
                    <option value="2">Votes Descending</option>
                    <option value="3">Rating Ascending</option>
                    <option value="4">Rating Descending</option>
                </select>

Вот ссылка на код: https://jsfiddle.net/natefr0st/zckrwdaf/

Answer 1

Я добавил для вас образец скрипки и реализовал первые две опции сортировки («Упорядочить по», «Голосование ASC». Я думаю, вы можете реализовать остальные опции сортировки:)

https://jsfiddle.net/on863L2m/2/

$('#sort').on('change', function() {
    displayMovies(1, $(this).val())
});


switch(sort) {
   case "0":
    movies = movies.sort(function (a, b) {
            return ((a.id < b.id) ? -1 : ((a.id > b.id) ? 1 : 0));
    });
   break;
   case "1":
    movies = movies.sort(function (a, b) {
            return ((a.imdb_votes < b.imdb_votes) ? -1 : ((a.imdb_votes > b.imdb_votes) ? 1 : 0));
    });
   break;
  }

Answer 2

Для этого вы захотите использовать Array.sort(). Любой вид сортировки, который вы хотите сделать, сводится к 3 основным результатам: a > b, a < b, a = b. Они соответствуют возвращаемым значениям 1, -1 и 0 соответственно. Так что на самом деле единственный трюк "что такое a и b?"И это вопрос, на который вы должны ответить. Это голоса? это имя? это рейтинг? и т.д.

Вот пример:

var objs = [
  {name: "Bob", age: 30},
  {name: "Susan", age: 35},
  {name: "Jennifer", age: 22}
];

function sortByName(a, b, sortAsc = true) {
  var val1 = a.name;
  var val2 = b.name;
  let result = ((val1 < val2) ? -1 : ((val1 > val2) ? 1 : 0));
  if (!sortAsc) {
    result *= -1;
  }
  return result;
}
// sort by name (ascending)
console.log(objs.sort((a, b) => sortByName(a, b, true)));
// sort by name (descending)
console.log(objs.sort((a, b) => sortByName(a, b, false)));

function sortByAge(a, b, sortAsc = true) {
  var val1 = a.age;
  var val2 = b.age;
  let result = ((val1 < val2) ? -1 : ((val1 > val2) ? 1 : 0));
  if (!sortAsc) {
    result *= -1;
  }
  return result;
}
// sort by age (ascending)
console.log(objs.sort((a, b) => sortByAge(a, b, true)));
// sort by age (descending)
console.log(objs.sort((a, b) => sortByAge(a, b, false)));

Как видите, единственное, что отличается между этими двумя функциями (sortByName и sortByAge), это свойство, на основе которого я построил свои значения сравнения. Используя это, мы можем создать общую функцию sortByProperty, которая использует эти понятия.

var objs = [
  {name: "Bob", age: 30},
  {name: "Susan", age: 35},
  {name: "Jennifer", age: 22}
];

function sortByProperty(a, b, property, sortAsc = true) {
  var val1 = a[property];
  var val2 = b[property];
  let result = ((val1 < val2) ? -1 : ((val1 > val2) ? 1 : 0));
  if (!sortAsc) {
    result *= -1;
  }
  return result;
}

function sortByName(items, sortAsc = true) {
  return objs.slice().sort((a, b) => sortByProperty(a, b, "name", sortAsc))
}
// sort by name (ascending) using helper function
console.log(sortByName(objs));
// sort by age (descending) calling sortByProperty directly
console.log(objs.slice().sort((a, b) => sortByProperty(a, b, "age", false)));

Отсюда выглядит, как только у вас есть набор данных, вы знаете, как поместить его в таблицу и выполнить разбиение по страницам, и т. Д., Чтобы я не стал беспокоитьсяв это. Дайте мне знать, если у вас есть какие-либо вопросы!