BootStrap-table的使用实现排序功能

BootStrap-table的使用实现排序功能

1.Bootstrap table 官网地址:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

2.下载相应的包后引入

 <script src="./js/jquery-3.1.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <!-- bootstrap-table-->
    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <link rel="stylesheet" href="./css/bootstrap-table.min.css">
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-zh-CN.js"></script>

3.数据填充示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Super_admin</title>
    <script src="./js/jquery-3.1.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>

    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <!--<link rel="stylesheet" href="./css/bootstrap-table.min.css">-->
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-zh-CN.js"></script>


    <style>

        .outer {

            width: auto;
            margin: 0 25px;
        }

        .content_body {
            width: 100%;
            border-top: 1px solid #D7D7D7;
            padding: 0;
            padding-left: 15px;
            position: relative;

        }

        /*搜索框*/

        .search .input-group {
            width: 176px;
            height: 28px;
        }

        .search .seachBtn {
            border-radius: 15px;
            background-color: #E4E4E4;
            height: 28px;
        }

        .search input {

            border-radius: 15px;
            height: 28px;
        }

        .search .search-icon {
            margin-top: 20px;
            position: relative;
            display: block;
            height: 34px;
        }

        .calendar {
            position: absolute;
            width: 188px;
            height: 28px;
            margin-top: -28px;
            margin-left: 200px;
            border-radius: 15px;
        }

        .search button.reflush {
            background-color: #246DFF;
            width: 74px;
            height: 28px;
            position: absolute;
            margin-left: 411px;
            margin-top: -28px;
            border-radius: 12px;
            text-align: center;
            line-height: 15px;
        }

        /*表格内容*/
        table {
            position: absolute;
            margin-left: -14px;
        }

        table thead {
            /*width: 1567px;*/
            margin: 0;
            width: 100%;
            height: 41px;
            background-color: #E4E4E4;
            text-align: left;
        }

        table thead ul {
            width: 84px;
            display: none;
            position: absolute;
            margin-top: 6px;
            margin-left: -5px;
            background-color: white;
            border: 1px solid #E4E4E4;
            /*阴影*/
            /*box-shadow: 1px 1px 5px #273327;*/
            padding-left: 9px;
            /*z-index: 999;*/

        }

        table thead ul li {
            display: block;
            list-style: none;
            text-align: left;
            padding-left: -40px;
        }

        table td.timeControl .upTriangle,
        table td.timeControl .downTriangle {
            display: block;
            width: 15px;
            height: 11px;
            font-size: 10px;
            margin: 0;
        }

        table td.timeControl .triangle {
            width: 15px;
            /*height: 15px;*/
            position: absolute;
            margin-top: -23px;
            margin-left: 36px;
        }

        .tableRow {
            margin-left: 0px;
        }

        a {

            color: black;
            text-decoration: none;
        }

        a:focus {
            color: black;
            text-decoration: none
        }

        a:hover {
            color: black;
            text-decoration: none
        }

        .bootstrap-table .table tbody > tr > td {
            border: none;
        }

        .bootstrap-table .table thead > tr > th {
            border: none;
        }

        .row .fixed-table-body {
            overflow-x: inherit;
            overflow-y: inherit;
            height: 100%;
            border: none;
            border-bottom: none;
        }

        .row .bootstrap-table {
            border: none;
        }

        .row .fixed-table-container {
            position: relative;
            clear: both;
            border: 0px solid #dddddd;
            border-radius: 0;
            -webkit-border-radius: 4px;

        }

        /*排序图片*/
        .row .sortable{
            width: 15px;
        }

        .row .fixed-table-container thead th .sortable {
            cursor: pointer;
            background-position: right;
            background-repeat: no-repeat;
            padding-right: 46px;
        }


    </style>
</head>
<body>

<div class="outer">

    <!--头部的块-->
    <h3> |&nbsp;&nbsp;系统日志</h3>

    <!--content_body内容块-->
    <div class="content_body container clearfix">
        <!--搜索框-->
        <div class="search">
            <div class="row">
                <div class="search-icon">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索">
                        <span class="input-group-btn">
        <button class="btn btn-default seachBtn" type="button">
            <!--搜索图标-->
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        </button>
      </span>
                        <!-- /input-group -->
                    </div>
                    <!--日历选择框-->
                    <div>
                        <input class="calendar form-control" aria-describedby="basic-addon1" type="text"
                               placeholder="日历">
                    </div>

                    <button class="btn btn-primary reflush">刷新</button>
                    <!-- /.col-lg-6 -->
                </div>
                <!-- /.row -->
            </div>
        </div>


        <!--table表格信息内容-->
        <!--<div class="panel-default">-->
        <div class="row tableRow">
            <!--data-toggle="table" data-url="data1.json"-->
            <table class=" table table-condensed" id="table">
                <!--<table    class="table table-condensed">-->
                <thead>
                <tr>

                    <th data-field="msgType" class="col-lg-3">
                        <a href="#" class="msg">消息类型&nbsp;∨</a>
                        <ul class="messageType">
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                            <li>消息类型1</li>
                        </ul>
                    </th>

                    <th data-field="time" class="timeControl col-lg-3" data-sortable="true">
                        <!--<a href="#" class="tim" >时间</a>-->
                        时间
                        <!--<div class="triangle">-->
                        <!--<span class="upTriangle">▲</span><span class="downTriangle">▼</span>-->
                        <!--</div>-->
                    </th>
                    <th data-field="sourcecome"  class="col-lg-3">
                        <a href="#" class="source">来源&nbsp;∨</a>
                        <ul class="source">
                            <li>来源1</li>
                            <li>来源2</li>
                            <li>来源3</li>
                            <li>来源4</li>
                        </ul>
                    </th>
                    <th data-field="content"  class="col-lg-3">消息内容</th>
                </tr>
                </thead>


                <tbody>
                <tr>
                    <td data-field="id">1</td>
                    <td data-field="name"> 2</td>
                    <td data-field="age">3</td>
                    <td data-field="age">4</td>

                </tr>
                </tbody>


            </table>
        </div>


        <!--content_body内容块-->
    </div>
</div>
<script>
    $(function () {
//        刷新
        $(".reflush").click(function () {
//            window.location.reload();
        })

var data= [
    {
        msgType: "msg001",
        time: "2018-09-08",
        sourcecome: "胖虎",
        content:"内容001"
    },
    {
        msgType: "msg002",
        time: "2018-12-07",
        sourcecome: "胖虎",
        content:"内容001"
    },
    {
        msgType: "msg003",
        time: "2018-10-07",
        sourcecome: "胖虎",
        content:"内容005"
    },
    {
        msgType: "msg004",
        time: "2018-11-08",
        sourcecome: "胖虎",
        content:"内容004"
    },
]
//JSON数据
        $('#table').bootstrapTable({
            data: data
        });

        $("a.msg").click(function () {
            console.log("ll");
            $("ul.messageType").toggle();
        })

        $("a.source").click(function () {
            console.log("ll");
            $("ul.source").toggle();
        })

    });
</script>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

远程RPC溢出EXP编写实战之MS06-040

0x01 前言 MS06-040算是个比较老的洞了,在当年影响十分之广,基本上Microsoft大部分操作系统都受到了影响,威力不亚于17年爆出的”永恒之蓝”漏...

322100
来自专栏xingoo, 一个梦想做发明家的程序员

Java程序员的日常—— Spring Boot单元测试

关于Spring boot 之前没有用Spring的时候是用的MockMvc,做接口层的测试,原理上就是加载applicationContext.xml文件,然...

35150
来自专栏Google Dart

Flutter 构建完整应用手册-联网 顶

从大多数应用程序获取互联网上的数据是必要的。 幸运的是,Dart和Flutter为这类工作提供了工具!

14020
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十一天 Web商城实战一【悟空教程】

public class BaseServlet extends HttpServlet {

21140
来自专栏安恒网络空间安全讲武堂

[HCTF] share write up

从http://share.2018.hctf.io/robots.txt中获取到题目部分源码

10920
来自专栏移动端开发

NSURLSession 所有的都在这里(一)

61030
来自专栏积累沉淀

CXF 框架拦截器

CXF的拦截器 •为什么设计拦截器? 1.为了在webservice请求过程中,能动态操作请求和响应数据, CXF设计了拦截器. •拦截器分类: 1...

20560
来自专栏GopherCoder

『No18: Go 实现世界杯后台管理系统』

趁着周末更新一期,上一期讲到 如何快速熟悉一个项目, 文章的最后讲到,最好的方法是借用相同的技术栈重新实现一个项目。

19910
来自专栏前端小叙

daterangepicker日历插件使用参数注意问题

显示具体时间时分秒: timePicker设置为true,//有些资料写的pickerTime不太对 重点大坑:修改时间默认展示格式,把fomat写在local...

34450
来自专栏Kubernetes

原 荐 Kubernetes Resourc

更多关于kubernetes的深入文章,请看我csdn或者oschina的博客主页。 ResoureQuota介绍 关于ResoureQuota和Resourc...

54190

扫码关注云+社区

领取腾讯云代金券