<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>跳转</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" rel="stylesheet">

</head>

<body>
<div class="container">
    <form>
        <div class="alert alert-info" role="alert">
            请输入描述和链接<br/>
            链接是需要跳转到的url,需要加http头，如:http://www.sina.com
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">描述</label>
            <input id="description" name="descriptioin" class="form-control"  placeholder="请输入描述">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">链接</label>
            <input id="url" name="url" type="text" class="form-control"  placeholder="请输入需要跳转的链接">
        </div>
        <button id="subtn" class="btn btn-default">提交</button>
    </form>
    <br/>
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
        <tr>
            <th>序号</th>
            <th style="width:200px;">原链接</th>
            <th style="width:200px;">生成链接</th>
            <th>描述</th>
            <th>添加时间</th>

        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <div id="pagination" style="float:right;" class="m-style">

    </div>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="/vendor/datatables-responsive/dataTables.responsive.js"></script>
<script src="/vendor/pagination/jquery.pagination.js"></script>
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/layer/2.1/skin/layer.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
<script>
    var table=null
    $(function(){
        $('#subtn').on('click',function (e) {
            e.preventDefault();
            $.ajax({
                url:'/addLink',
                type:'post',
                data:{
                    url:$('#url').val(),
                    description:$('#description').val()
                },
                success:function(res){
                    layer.alert('添加成功！跳转链接：'+res.data);
                }
            })
        })

        updateTable();
    })

    function updateTable(page=1,action='update'){
        var index = layer.load(3);
        $.ajax({
            url:'/getLinksList',
            type:'get',
            data:{
                'page':page,
                'pagesize':20,
                'zstart':$('#zstart').val(),
                'zend':$('#zend').val(),
                'status':$('#status').val(),
                'channel':$('#channel').val()
            },
            success:function(res){
                console.log('123',res)
                layer.close(index)
                $('#money_container').html(res.pay_sum)
                if(res.data.length<=0){
                    res.data = [];
                }
                if(table != null) table.destroy();
                table = $('#dataTables-example').DataTable({
                    data:res.data.data,
                    responsive: true,
                    paging:false,
                    searching:false,
                    retrieve: true,
                    ordering:  false,
                    bAutoWith:false,
                    columns: [
                        { data: 'id'},
                        { data: 'url'},
                        { data: 'final_url'},
                        { data: 'description'},

                        { data: 'created_at'},

                    ]
                });
                if(action == 'update'){
                    $("#pagination").pagination( {
                        pageCount: res.data.pagecount,
                        jump: true,
                        coping: true,
                        homePage: '首页',
                        endPage: '末页',
                        prevContent: '上页',
                        nextContent: '下页',
                        callback: function (api) {
                            console.log(api.getCurrent())
                            var current_page = api.getCurrent()
                            updateTable(current_page,'page_change')
                        }
                    });
                }
            }
        })
    }
</script>
</html>