js表格排序

2023年4月7日 144次阅读 来源: 四号公园_2016
利用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里面的对应的标题项看结果

    原文作者：四号公园_2016
    原文地址: https://www.jianshu.com/p/3380490ded94
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞