Rumah > hujung hadapan web > tutorial js > sortElements实现table排序步骤详解

sortElements实现table排序步骤详解

php中世界最好的语言
Lepaskan: 2018-04-26 09:23:16
asal
1892 orang telah melayarinya

这次给大家带来sortElements实现table排序步骤详解,sortElements实现table排序的注意事项有哪些,下面就是实战案例,一起来看一下。

jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题。 

DataTables,大小75KB,功能强大,带分页,搜索等功能。
还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星。
最后我选择用sortElements,实现很简单:
1. 引入jQuery

<script type="text/
javascript
" src="jquery.js"></script>
Salin selepas log masuk

2. 引入sortElements.js

<script type="text/javascript" src="jquery.sortElements.js"></script>
Salin selepas log masuk

3. js 代码

$(document).ready(function(){ 
var table = $(&#39;#mytable&#39;);//table的id 
$(&#39;#sort_header&#39;)//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find(&#39;td&#39;).filter(function(){ 
return $(this).index() === thIndex; 
}).sortElements(function(a, b){ 
return $.text([a]) > $.text([b]) ? 
inverse ? -1 : 1 
: inverse ? 1 : -1; 
}, function(){ 
return this.parentNode; 
}); 
inverse = !inverse; 
}); 
}); 
});
Salin selepas log masuk

4. html代码

<table id="mytable"> 
<tr> 
<th id="sort_header">Facility name</th> 
<th>Phone #</th> 
<th id="city_header">City</th> 
<th>Speciality</th> 
</tr> 
<tr> 
<td>CCC</td> 
<td>00001111</td> 
<td>Amsterdam</td> 
<td>GGG</td> 
</tr> 
</table>
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jquery实现表格排序+实时搜索功能

jQuery做出圆形图标菜单轮流切换功能

Atas ialah kandungan terperinci sortElements实现table排序步骤详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan