123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <!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>
|