jQuery排序表 - 加载时更改订单

时间:2017-05-26 14:36:38

标签: jquery

我遇到了这个JS Fiddle,这很棒。我需要做些什么更改才能在页面加载时按降序对第三列进行排序?

$(document).on('click', 'th', function() {
  var table = $(this).parents('table').eq(0);
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
  this.asc = !this.asc;
  if (!this.asc) {
    rows = rows.reverse();
  }
  table.children('tbody').empty().html(rows);
});

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);
  };
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}

Here is the link to the Fiddle.

非常感谢提前。

1 个答案:

答案 0 :(得分:1)

只需将排序逻辑放在一个单独的函数中,并在$(document).ready()

上调用该函数
$(document).ready(function() {
  sort();
});

$(document).on('click', 'th', function() {
  sort();
});

function sort() {
    var table = $('table').eq(0);
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
    this.asc = !this.asc;
    if (!this.asc) {
      rows = rows.reverse();
    }
    table.children('tbody').empty().html(rows);
}

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);
  };
}

function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}