Question

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

＆＃13;

$('.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();
});

＆＃13;

thead {
      color: green;
    }

tbody {
      color: blue;
    }

tfoot {
      color: red;
}

table,
th,
td {
      border: 1px solid black;
    }

＆＃13;

<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>

＆＃13;

我需要通过按下标题来对我的列进行升序/降序排序，但我对jquery不熟悉，我只是想弄清楚，我无法找到一个很好的教程，只用jquery对表进行排序，我不允许使用任何其他插件

Answer 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。

Answer 2

问题是你的细胞对于少数几个人的白色空间。你可以.trim那些文本然后就可以了：

 var keyA = $.trim($('td:eq(0)',a).text());
 var keyB = $.trim($('td:eq(0)',b).text());

FIDDLE

仅使用jquery对表进行排序，没有其他插件

2 个答案: