前端:
1 {{--导入父模板--}} 2 @extends('admin.common.main') 3 {{--替换到content中--}} 4 @section('content') 5 <nav class="breadcrumb"> 6 <i class="Hui-iconfont"></i> 首页 7 <span class="c-gray en">></span> 文章管理 8 <span class="c-gray en">></span> 文章列表 9 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" 10 href="javascript:location.replace(location.href);" title="刷新"> 11 <i class="Hui-iconfont"></i> 12 </a> 13 </nav> 14 <div class="page-container"> 15 <div class="text-c"> 16 <form onsubmit="return search()"> 17 日期范围: 18 <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" 19 class="input-text Wdate" style="width:120px;" name="datemin"> 20 - 21 <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" 22 id="datemax" class="input-text Wdate" style="width:120px;" name="datemax"> 23 <input type="text" class="input-text" style="width:250px" placeholder="文章标题" name="title" id="title"> 24 <button type="submit" class="btn btn-success" id="" name=""> 25 <i class="Hui-iconfont"></i> 搜索 26 </button> 27 </form> 28 </div> 29 <div class="cl pd-5 bg-1 bk-gray mt-20"> 30 {{--引入信息提示的模板--}} 31 @include('admin.common.msg') 32 <span class="l"> 33 <a href="javascript:;" class="btn btn-danger radius delete-all"> 34 <i class="Hui-iconfont"></i> 批量删除 35 </a> 36 <a href="{{route('admin.article.create')}}" class="btn btn-primary radius"> 37 <i class="Hui-iconfont"></i> 添加文章 38 </a> 39 </span> 40 <span class="r">共有数据:<strong>54</strong> 条</span> 41 </div> 42 <table class="table table-border table-bordered table-bg table-sort"> 43 <thead> 44 <tr> 45 <th scope="col" colspan="7">文章列表</th> 46 </tr> 47 <tr class="text-c"> 48 <th width="25"><input type="checkBox" name="" ></th> 49 <th width="35">ID</th> 50 <th width="150">文章标题</th> 51 <th width="30">作者</th> 52 <th width="75">加入时间</th> 53 <th width="50">操作</th> 54 </tr> 55 </thead> 56 <tbody> 57 </tbody> 58 </table> 59 </div> 60 @endsection 61 62 @section("js") 63 <script> 64 function search() { 65 datatable.ajax.reload(); 66 return false 67 } 68 var datatable = $('.table-sort').DataTable({ 69 // 下拉的分页数量 70 lengthMenu:[5,10,15,20,25,30,35,40,45,50], 71 // 隐藏搜索框 72 searching: false, 73 // 禁止排序 74 ColumnDefs: [ 75 // 索引第3列,不进行培训 76 {targets: [0, 5],orderable: false} 77 ], 78 // 开启服务器模式 79 serverSide: true, 80 // 发送Ajax请求 81 ajax:{ 82 type:"get", 83 url:"{{route('admin.article.index')}}", 84 // 获取事件和标题的值 85 data:function (res) { 86 res.datemin = $("#datemin").val() 87 res.datemax = $("#datemax").val() 88 res.title = $("#title").val() 89 } 90 }, 91 columns: [ 92 // 总的数量与表格的列的数量一致,不多也不少 93 // 字段名称与SQL查询出来的字段要保持一致,即服务器返回数据对应的字段名称 94 // defaultContent和className可选参数 95 // 如果上面的字段跟下面字段不对应,则会出现style未找到 96 {'data': 'default', "defaultContent": "<input type='checkBox' value='' name='ids[]'>"}, 97 {'data': 'id', 'className':"text-c"}, 98 {'data': "title"}, 99 // {'data': "desc"}, 100 {'data': 'author','className':"text-c"}, 101 // {'data': 'body'}, 102 {'data': 'created_at'}, 103 {'data': 'btn'} 104 ] 105 }); 106 // 表格加载完毕后的出发时间 107 datatable.on('draw', function () { 108 // 获取DOM 109 $(".btn-del").click(function () { 110 // 获取删除地址 111 var url = $(this).attr("href"); 112 // 发送ajax请求 113 $.ajax({ 114 type:"DELETE", 115 data:{_token:"{{csrf_token()}}"}, 116 url, 117 }).then((res)=>{ 118 // 让datatable方法重新加载一次 119 datatable.ajax.reload(); 120 }) 121 return false; 122 }) 123 }) 124 </script> 125 @endsection
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。