利用jquery的jquery.tablesorter.js來(lái)實(shí)現(xiàn),不依賴別的東西
1.下載jquery.tablesorter.js
2.創(chuàng)建表格(一定要按照thead和tbody的格式才支持)
<table class="table table-bordered table-hover" style="margin-bottom: 10px;" id="mytable">
<thead>
<tr>
<th>IP</th>
<th>IDC</th>
<th>部門</th>
<th>負(fù)責(zé)人</th>
</tr>
</thead>
<tbody>
<tr>
<td>192.168.1.1</td>
<td>宿遷</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>192.168.1.2</td>
<td>亦莊</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>192.168.1.3</td>
<td>廊坊</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>192.168.1.4</td>
<td>宿遷</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
3.創(chuàng)建自執(zhí)行函數(shù)
<!-- 引入jquery文件忽略-->
<script src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function (){
$("#mytable").tablesorter();
})
</script>
4.驗(yàn)證排序功能
點(diǎn)擊thead里面的對(duì)應(yīng)的標(biāo)題項(xiàng)看結(jié)果