logo标签列表

只使用jQuery来对表格进行排序，不使用其他插件

jquerysorting
3
到目前为止，我已经得到了这段代码： 

$('.link-sort-table').click(function(e) {
  var $sort = this;
  var $table = $('#sort-table');
  var $rows = $('tbody > tr', $table);
  $rows.sort(function(a, b) {
    var keyA = $('td:eq(0)', a).text();
    var keyB = $('td:eq(0)', b).text();
    if ($($sort).hasClass('asc')) {
      return (keyA > keyB) ? 1 : -1;
    } else {
      return (keyA < keyB) ? 1 : -1;
    }
  });
  $.each($rows, function(index, row) {
    $table.append(row);
  });
  e.preventDefault();
});
thead {
      color: green;
    }

tbody {
      color: blue;
    }

tfoot {
      color: red;
}

table,
th,
td {
      border: 1px solid black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <table id="sort-table" cellpadding="5" cellspacing="2" border="0">
    <thead>
      <tr>
        <th align="left">Sort: <a href="#" class="link-sort-table asc">A-Z</a>  <a href="#" class="link-sort-table desc">Z-A</a>
        </th>
        <th>Filme</th>
        <th>Seriale</th>
        <th>Carti</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Sprinter Cell</td>
        <td>The Martian</td>
        <td>My Name is Earl</td>
        <td>Harry Potter</td>
      </tr>
      <tr>
        <td>Tomb Raider</td>
        <td>Inception</td>
        <td>The Big Bang Theory</td>
        <td>The Casual Vacancy</td>
      </tr>
      <tr>
        <td>Need for Speer</td>
        <td>Ted</td>
        <td>Supergirl</td>
        <td>Fiddy shades</td>
      </tr>
      <tr>
        <td>Counter Strike</td>
        <td>Limitless</td>
        <td>One-Punch Man</td>
        <td>Morometii</td>
      </tr>
      <tr>
        <td>Half Life</td>
        <td>Pixels</td>
        <td>Fresh off the boat</td>
        <td>i KILL</td>
      </tr>
      <tr>
        <td>FarCry</td>
        <td>James Bond</td>
        <td>House of Cards</td>
        <td>Punguta cu 2 bani</td>
      </tr>
      <tr>
        <td>Dota</td>
        <td>Hunger Games</td>
        <td>DareDevil</td>
        <td>The Ink</td>
      </tr>
      <tr>
        <td>The Adventures Of Van-Helsing</td>
        <td>Inception</td>
        <td>iZombie</td>
        <td>Blackout</td>
      </tr>
      <tr>
        <td>The Hidden</td>
        <td>Silver Lining Playbook</td>
        <td>Game of Thrones</td>
        <td>Twilight</td>
      </tr>
      <tr>
        <td>League of Legends</td>
        <td>Predestination</td>
        <td>Dexter</td>
        <td>The Imitation game</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

我需要通过点击表头来实现列的升序/降序排序，但我对jQuery不熟悉，无法理解它的用法。同时，我也找不到一个好的教程来使用jQuery进行表格排序，而且我不能使用其他插件。

2个回答
1

使用 jQuery.fn 创建自己的函数并扩展它 jQuery.fn

var people = [
            { 'myKey': 'Ankit', 'status': 0 },    
            { 'myKey': 'Bhavik', 'status': 3 },
            { 'myKey': 'Parth', 'status': 7 },
            { 'myKey': 'Amin', 'status': 9 },
            { 'myKey': 'Russ', 'status': 9 },
            { 'myKey': 'Pete', 'status': 10 },
            { 'myKey': 'Ravi', 'status': 2 },
            { 'myKey': 'Tejas', 'status': 2 },
            { 'myKey': 'Dilip', 'status': 1 },
            { 'myKey': 'Piyush', 'status': 12 }
        ];
        alert("0. At start: " + JSON.stringify(people));

        //META.fn: sortData
        jQuery.fn.sortData = function (prop, asc) {
                return this.sort(function (a, b) {           
                    var x = a[prop];
                var y = b[prop];
                    var retrunStatus = ((x < y) ? 1 : ((x > y) ? -1 : 0));
                    return (asc==undefined || asc) ? (retrunStatus * -1) : retrunStatus ;        
                });
            }

        people2 = $(people).sortData('myKey',false);
        alert("1. After sorting (0 to x): " + JSON.stringify(people2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

从 JSON 生成 HTML，先对你的 JSON 进行排序，然后生成 HTML。
0
问题在于您的一些单元格中存在空格。您可以使用.trim函数去除这些空格，然后就没问题了：
 var keyA = $.trim($('td:eq(0)',a).text());
 var keyB = $.trim($('td:eq(0)',b).text());

代码片段

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接