<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>学生信息</title>
    <link th:href="@{static/photograph/cropper.min.css}" rel="stylesheet"/>
    <link th:href="@{static/photograph/ImgCropping.css}" rel="stylesheet"/>
    <link th:href="@{static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{static/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{static/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{static/ajax/libs/bootstrap-treeview/bootstrap-treeview.css}" rel="stylesheet"/>
    <link th:href="@{static/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{static/css/style.css}" rel="stylesheet"/>

    <script th:src="@{static/js/jquery.min.js}"></script>
    <script th:src="@{static/js/bootstrap.min.js}"></script>
    <!-- 播放器 -->
    <script th:src="@{static/js/dplayer.min.js}"></script>
    <!-- layer弹出层 -->
    <script th:src="@{static/layer/layer.js}"></script>
    <!-- bootstrap-table 表格插件 -->
    <script th:src="@{static/ajax/libs/bootstrap-table/bootstrap-table.min.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js}"></script>

    <!-- jquery-export 表格导出插件 -->
    <script th:src="@{static/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
    <script th:src="@{static/ajax/libs/bootstrap-table/extensions/export/tableExport.js}"></script>

    <!-- select2下拉框插件 -->
    <link th:href="@{static/ajax/libs/select2/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{static/ajax/libs/select2/select2-bootstrap.css}" rel="stylesheet"/>
    <script th:src="@{static/ajax/libs/select2/select2.min.js}"></script>

    <!-- bootstrap-select下拉框插件 -->
    <link th:href="@{static/ajax/libs/bootstrap-select/bootstrap-select.css}" rel="stylesheet"/>
    <script th:src="@{static/ajax/libs/bootstrap-select/bootstrap-select.js}"></script>


</head>
<body>

<table id="table" data-toggle="table" data-search="true" ></table>
<div style="position:relative; height: 100%;width: 150px;float: right;z-index:2;" onmouseover="view()" onmouseout="hide()">
    <div  id="view" style="position:relative; height: 100%;width: 150px;float: right;z-index:2;display: none;" >
        <button id="btn1" type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-leaf"></span> View
        </button><br/>
        <span class="glyphicon glyphicon-tags">标签</span>
    </div>
</div>

<div style="margin: 100px;float: right;">
    <div id="dplayer" style="width: 700px;height: 400px;"></div>
</div>


<script>
    $(function() {

    });

    function view() {
        $("#view").css('display','block');
    }

    function hide() {
        $("#view").css('display','none');
    }
    //弹出一个提示层
    $('#btn1').on('click', function(){
        //边缘弹出
        layer.open({
            type: 1,
            offset: 'r',
            content: '<div style="padding: 20px 80px;">内容</div>',
            shade: 0, //不显示遮罩
            yes: function(){
                layer.closeAll();
            },
        });
    });

    $('#table').bootstrapTable({
        url: '/list',        // 表格数据来源
        method: 'post',
        dataType: 'json',
        striped: true,
        pagination: true,
        showExport: true,
        showColumns: true,  //是否显示所有的列
        showRefresh: true,  //是否显示刷新按钮
        pageList: [10, 25, 50, 100],
        columns: [{
            field: 'stuid',
            title: '学号'
        }, {
            field: 'stuclass',
            title: '班级'
        }, {
            field: 'stuname',
            title: '姓名'
        },{
            field: 'stuage',
            title: '年龄'
        },{
            field: 'stusex',
            title: '性别'
        },{
            field: 'stutel',
            title: '电话'
        }
        ]
    });

    var dplayer = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {  //视频源 包含不同分辨率源
            url: 'https://miaopai.video.weibocdn.com/3i2kZrKclx07ghClI6ek01040201q6HH0E013?Expires=1585212543&ssig=kCLO2uUXXO&KID=unistore,video'
        },
        danmaku: {
            addition: ['http://api.prprpr.me/dplayer/v3/bilibili?oid=12345'],
        },
    });
</script>
</body>
</html>