专栏首页Spring相关BootStrap-table的使用实现排序功能

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 条评论
登录 后参与评论

相关文章

  • 弹幕和回到顶部前端web

    Dream城堡
  • 手风琴图片和钢琴导航栏JQ滑动特效

    Dream城堡
  • jquery 选中某一行

    Dream城堡
  • c++11/14快速入门(一)实验楼学习笔记

    从现在开始,你的脑子里应该树立 『C++ 不是 C 的一个超集』这个观念(而且从一开始就不是)。在编写 C++ 时,也应该尽可能的避免使用诸如 void* 之类...

    韩旭051
  • Python flask框架实现查询数据库并显示数据

    代码在git上https://github.com/qingnvsue/flask的sql文件夹

    砸漏
  • Hilldiv: 便捷的计算及可视化Hill number

    输入OTU 或者向量,计算对应的Hill。如果有树的信息,则会计算基于系统发育的Hill。

    生物信息知识分享
  • sql mysql统计表记录数

    葫芦
  • 政府开放大数据,最开心的是百度?

    原创2015-03-23罗超 李克强总理在两会上明确表态:政府应该尽量的公开非涉密的数据,以便利用这些数据更好的服务社会,也为政府决策和监管服务。这已不是政府第...

    罗超频道
  • Rxjava2-小白入门(二)

    上篇文章我们主要讲解了观察者模式。那么这节课我们主要讲解Rxjava2的基本使用和操作符。其实网上的关于Rxjava2的优秀文章有很多对我来说都是受益匪浅。可能...

    g小志
  • vue2.0移动端自定义性别选择提示框

    这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。

    王小婷

扫码关注云+社区

领取腾讯云代金券