js表格排序

作者: 四号公园_2016 | 来源:发表于2017-01-22 16:51 被阅读0次
利用jquery的jquery.tablesorter.js来实现,不依赖别的东西
1.下载jquery.tablesorter.js

jquery.tablesorter.js

2.创建表格(一定要按照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>负责人</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.创建自执行函数
<!-- 引入jquery文件忽略-->
<script src="/static/js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function (){
        $("#mytable").tablesorter();
})
</script>
4.验证排序功能

点击thead里面的对应的标题项看结果

相关文章

网友评论

    本文标题:js表格排序

    本文链接:https://www.haomeiwen.com/subject/wmjobttx.html