前端：

  1 {{--导入父模板--}}
  2 @extends('admin.common.main')
  3 {{--替换到content中--}}
  4 @section('content')
  5     <nav class="breadcrumb">
  6         <i class="Hui-iconfont">&#xe67f;</i> 首页
  7         <span class="c-gray en">&gt;</span> 文章管理
  8         <span class="c-gray en">&gt;</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">&#xe68f;</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">&#xe665;</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">&#xe6e2;</i> 批量删除
 35             </a>
 36             <a href="{{route('admin.article.create')}}" class="btn btn-primary radius">
 37                 <i class="Hui-iconfont">&#xe600;</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