javascript - 为什么表格排序在我的 table 上不起作用？ ( Ajax 表)

Question

我正在使用 Ajax 从 MySQL 加载表。 我已经尝试过 tablesorter.com 和其他一些网站一样，但没有一个对我有用。

我找到了这个jsfiddle http://jsfiddle.net/gFzCk/4694/在 stackoverflow 上，它不适用于我的表。

Js代码:-

var table = $('#gods');
$('#tname, #bdmg')
  .wrapInner('<span title="sort this column"/>')
  .each(function() {
  var th = $(this),
      thIndex = th.index(),
      inverse = false;
  th.click(function() {
    table.find('td').filter(function() {
      return $(this).index() === thIndex;
    }).sortElements(function(a, b) {
      return $.text([a]) > $.text([b]) ?
        inverse ? -1 : 1 :
      inverse ? 1 : -1;
    }, function() {
      // parentNode is the element we want to move
      return this.parentNode;
    });
    inverse = !inverse;
  });
});

。 HTML:-

<table id="gods">
   <tr>
      <th>img</th>
      <th id="tname">Name</th>
      <th id="bdmg">Bdmg</th>
      <th>Attspeed</th>
      <th>Physdef</th>
      <th>Magdef</th>
      <th>Health</th>
      <th>Mana</th>
      <th>HP5</th>
      <th>Mspeed</th>
      <th>MP5</th>
      <th>Lifesteal</th>
      <th>Power</th>
   </tr>
</table>

我在这里做错了什么？

Answer 1

您必须在代码中包含库 jquery.sortElements.js 才能实现此功能。

https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js

var table = $('#gods');
    $('#tname, #bdmg')
        .wrapInner('<span title="sort this column"/>')
        .each(function(){

            var th = $(this),
                thIndex = th.index(),
                inverse = false;

            th.click(function(){

                table.find('td').filter(function(){

                    return $(this).index() === thIndex;

                }).sortElements(function(a, b){

                    return $.text([a]) > $.text([b]) ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;

                }, function(){

                    // parentNode is the element we want to move
                    return this.parentNode; 

                });

                inverse = !inverse;

            });

        });

td, th { border: 1px solid #111; padding: 6px; }
th { font-weight: 700; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<table id="gods">
       <tr>
    	<th>img</th>
    	<th id="tname">Name</th>
    	<th id="bdmg">Bdmg</th>
      </tr>
      <tr>
    	<td>Attspeed</td>
    	<td>Physdef</td>
    	<td>Magdef</td>
      </tr>
      <tr>
    	<td>Health</td>
    	<td>Mana</td>
    	<td>HP5</td>
      </tr><tr>
    	<td>Mspeed</td>
    	<td>MP5</td>
    	<td>Lifesteal</td>
      
    </tr>
   </table>