index.blade.php 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>跳转</title>
  6. <!-- 包含头部信息用于适应不同设备 -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!-- 包含 bootstrap 样式表 -->
  9. <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
  10. <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" media="screen">
  11. <link rel="stylesheet" type="text/css" href="/vendor/pagination/pagination.css" rel="stylesheet">
  12. </head>
  13. <body>
  14. <div class="container">
  15. <form>
  16. <div class="alert alert-info" role="alert">
  17. 请输入描述和链接<br/>
  18. 链接是需要跳转到的url,需要加http头,如:http://www.sina.com
  19. </div>
  20. <div class="form-group">
  21. <label for="exampleInputEmail1">描述</label>
  22. <input id="description" name="descriptioin" class="form-control" placeholder="请输入描述">
  23. </div>
  24. <div class="form-group">
  25. <label for="exampleInputPassword1">链接</label>
  26. <input id="url" name="url" type="text" class="form-control" placeholder="请输入需要跳转的链接">
  27. </div>
  28. <button id="subtn" class="btn btn-default">提交</button>
  29. </form>
  30. <br/>
  31. <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
  32. <thead>
  33. <tr>
  34. <th>序号</th>
  35. <th style="width:200px;">原链接</th>
  36. <th style="width:200px;">生成链接</th>
  37. <th>描述</th>
  38. <th>添加时间</th>
  39. </tr>
  40. </thead>
  41. <tbody>
  42. </tbody>
  43. </table>
  44. <div id="pagination" style="float:right;" class="m-style">
  45. </div>
  46. </div>
  47. </body>
  48. <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  49. <script src="/vendor/datatables/js/jquery.dataTables.min.js"></script>
  50. <script src="/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
  51. <script src="/vendor/datatables-responsive/dataTables.responsive.js"></script>
  52. <script src="/vendor/pagination/jquery.pagination.js"></script>
  53. <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/layer/2.1/skin/layer.css" rel="stylesheet">
  54. <script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
  55. <script>
  56. var table=null
  57. $(function(){
  58. $('#subtn').on('click',function (e) {
  59. e.preventDefault();
  60. $.ajax({
  61. url:'/addLink',
  62. type:'post',
  63. data:{
  64. url:$('#url').val(),
  65. description:$('#description').val()
  66. },
  67. success:function(res){
  68. layer.alert('添加成功!跳转链接:'+res.data);
  69. }
  70. })
  71. })
  72. updateTable();
  73. })
  74. function updateTable(page=1,action='update'){
  75. var index = layer.load(3);
  76. $.ajax({
  77. url:'/getLinksList',
  78. type:'get',
  79. data:{
  80. 'page':page,
  81. 'pagesize':20,
  82. 'zstart':$('#zstart').val(),
  83. 'zend':$('#zend').val(),
  84. 'status':$('#status').val(),
  85. 'channel':$('#channel').val()
  86. },
  87. success:function(res){
  88. console.log('123',res)
  89. layer.close(index)
  90. $('#money_container').html(res.pay_sum)
  91. if(res.data.length<=0){
  92. res.data = [];
  93. }
  94. if(table != null) table.destroy();
  95. table = $('#dataTables-example').DataTable({
  96. data:res.data.data,
  97. responsive: true,
  98. paging:false,
  99. searching:false,
  100. retrieve: true,
  101. ordering: false,
  102. bAutoWith:false,
  103. columns: [
  104. { data: 'id'},
  105. { data: 'url'},
  106. { data: 'final_url'},
  107. { data: 'description'},
  108. { data: 'created_at'},
  109. ]
  110. });
  111. if(action == 'update'){
  112. $("#pagination").pagination( {
  113. pageCount: res.data.pagecount,
  114. jump: true,
  115. coping: true,
  116. homePage: '首页',
  117. endPage: '末页',
  118. prevContent: '上页',
  119. nextContent: '下页',
  120. callback: function (api) {
  121. console.log(api.getCurrent())
  122. var current_page = api.getCurrent()
  123. updateTable(current_page,'page_change')
  124. }
  125. });
  126. }
  127. }
  128. })
  129. }
  130. </script>
  131. </html>