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

为此，您将要使用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)));

从那里开始，看起来好像有了数据集，便知道如何将其放入表中并进行分页等，因此我不会理会它。让我知道您是否有任何疑问！

Answer 2

我为您添加了一个小提琴示例，并实现了前两个排序选项（“排序依据”，“投票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;
  }

通过选择下拉列表的JavaScript排序表

2 个答案: