我使用Ajax从MySQL加载表。
我和其他人一样尝试了tablesorter.com
,但没有一个能为我工作。
我在stackoverflow上找到了这个jsfiddle http://jsfiddle.net/gFzCk/4694/,但它不能用于我的桌面。
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>
我在这里做错了什么?
答案 0 :(得分: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>