ApiAdmin/Application/Admin/View/Document/index.html

<extend name="Public/base" />
<block name="main">
    <script type="text/javascript" src="__PUBLIC__/dataTable/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/css/dataTable.css">
    <fieldset class="layui-elem-field">
        <legend>秘钥列表</legend>
        <div class="layui-field-box">
            <span class="layui-btn layui-btn-normal api-add"><i class="layui-icon">&#xe608;</i> 新增</span>
            <table class="layui-table" id="list-admin" lay-even>
                <thead>
                <tr>
                    <th>访问秘钥</th>
                    <th>过期时间</th>
                    <th>访问次数</th>
                    <th>最近访问</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </fieldset>
</block>
<block name="myScript">
    <script>
        /**
         * 格式化时间戳
         * @param fmt
         * @returns {*}
         * @constructor
         */
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };

        layui.use(['layer', 'form'], function() {
            $(document).on('click', '.confirm', function () {
                var ownObj = $(this);
                layer.confirm(ownObj.attr('data-info'), {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        type: "POST",
                        url: ownObj.attr('data-url'),
                        data: {key:ownObj.attr('data-id')},
                        success: function(msg){
                            if( msg.code == 1 ){
                                location.reload();
                            }else{
                                layer.msg(msg.msg, {
                                    icon: 5,
                                    shade: [0.6, '#393D49'],
                                    time:1500
                                });
                            }
                        }
                    });
                });
            });

            $(document).on('click', '.addTime', function () {
                var ownObj = $(this);
                layer.open({
                    type: 2,
                    area: ['80%', '80%'],
                    maxmin: true,
                    content: ownObj.attr('data-url')+'&key='+ownObj.attr('data-id')
                });
            });

            $('.api-add').on('click', function () {
                layer.open({
                    type: 2,
                    area: ['80%', '80%'],
                    maxmin: true,
                    content: '{:U("add")}'
                });
            });

            var myFun = function (query) {
                query = query || '';
                return $('#list-admin').DataTable({
                    dom: 'rt<"bottom"ifpl><"clear">',
                    ordering: false,
                    autoWidth: false,
                    searching:false,
                    serverSide: true,
                    ajax: {
                        url:'{:U("ajaxGetIndex")}' + query,
                        type: 'POST',
                        dataSrc: function ( json ) {
                            if( json.code == 0 ){
                                parent.layer.msg(json.msg, {
                                    icon: 5,
                                    shade: [0.6, '#393D49'],
                                    time:1500
                                });
                            }else{
                                return json.data;
                            }
                        }
                    },
                    columnDefs:[
                        {
                            "targets":1,
                            "render": function(data){
                                return new Date(data*1000).Format("yyyy-MM-dd hh:mm:ss");
                            }
                        },
                        {
                            "targets":3,
                            "render": function(data){
                                return new Date(data*1000).Format("yyyy-MM-dd hh:mm:ss");
                            }
                        },
                        {
                            "targets":4,
                            "render": function(data){
                                if(data == 1){
                                    return '<span style="border-radius: 2px;background-color: #5FB878;padding:5px 10px;color: #ffffff">已启用</span>';
                                }else{
                                    return '<span style="border-radius: 2px;background-color: #FF5722;padding:5px 10px;color: #ffffff">已禁用</span>';
                                }
                            }
                        },
                        {
                            "targets":5,
                            "render":function(data, type, row){
                                var returnStr = '';
                                if(row.status == 1){
                                    returnStr += '<span class="layui-btn layui-btn-danger confirm" ' +
                                        'data-id="' + row.key +'" data-info="你确定禁用当前Key么？" data-url="{:U(\'close\')}">禁用</span>';
                                }else{
                                    returnStr += '<span class="layui-btn layui-btn-warm confirm" ' +
                                        'data-id="' + row.key +'" data-info="你确定启用当前Key么？" data-url="{:U(\'open\')}">启用</span>';
                                }
                                returnStr += '<span class="layui-btn addTime layui-btn-normal" ' +
                                    'data-id="' + row.key +'" data-url="{:U(\'addTime\')}">延长时间</span>';
                                returnStr += '<span class="layui-btn layui-btn-danger confirm" ' +
                                    'data-id="' + row.key +'" data-info="你确定删除当前菜单么？" data-url="{:U(\'del\')}">删除</span>';
                                return returnStr;
                            }
                        }
                    ],
                    iDisplayLength : 20,
                    aLengthMenu : [20, 30, 50],
                    columns: [
                        {"data": "key"},
                        {"data": "endTime"},
                        {"data": "times" },
                        {"data": "lastTime" },
                        {"data": "status" },
                        {"data": null }
                    ]
                });
            };
            var myTable = myFun();
            $('.sub').on("click", function(){
                myTable.destroy();
                myTable = myFun('&'+ $('#form-admin-add').serialize());
            });
        });
    </script>
</block>