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