美文网首页
jQuery不用插件实现任意列表或表格的排序

jQuery不用插件实现任意列表或表格的排序

作者: 青柠下午茶 | 来源:发表于2017-05-12 22:17 被阅读0次

一般表格<table>的结构应该是:

<table>
  <thead>
    <tr>
      <th>head1</th>
      <th>head2</th>
      <th>head3</th>
      <th>head4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>b</td>
      <td>300</td>
      <td>你好</td>
    </tr>
    <tr>
      <td>3</td>
      <td>a</td>
      <td>100</td>
      <td>第一弹</td>
    </tr>
    <tr>
      <td>2</td>
      <td>c</td>
      <td>300</td>
      <td>斯干</td>
    </tr>
  </tbody>
</table>

jQ脚本:

{#表格排序01#}
$(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);
});
{#表格排序02#}
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);
  };
}
{#表格排序03#}
function getCellValue(row, index) {
  return $(row).children('td').eq(index).text();
}

分析:


{#表格排序01#}
$(document).on('click', 'th', function() {  {#监视表头点击#}
  var table = $(this).parents('table').eq(0);   {#点击表头时,取得表格的<table>元素#}
  var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));  {#找到<tbody>中所有<tr>,并排序;($(this).index()获取点击列的列序号)#}
  this.asc = !this.asc; {#每次点击反向排序#}
  if (this.asc) {   {#默认首次点击逆序排列#}
    rows = rows.reverse();  {#排序后<tr>替换原始<tr>#}
  }
  table.children('tbody').empty().html(rows);
});
{#表格排序02#}
function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index),  {#得到本<tr>的第index列的值#}
      valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ?
      valA - valB : valA.localeCompare(valB);   {#可对数字和字符串进行排序,以相减的值进行排序;(数字以数值大小排序,字符串先转为数值型再按数值型排序)#}
  };
}
{#表格排序03#}
function getCellValue(row, index) { {#取得row行index列的值#}
  return $(row).children('td').eq(index).text();    {#从row行find第index列的值#}
}

相关文章