laravel Datatables分页,排序,搜索,删除
laravel提示错误信息:
{{implode($errors->get('name')," ")}}
html:代码
<div class="page-container"> <form method="get" onsubmit="return search()"> <div class="text-c"> 日期范围: <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'datemax\')||\'%y-%M-%d\'}' })" id="datemin" class="input-text Wdate" style="width:120px;"> <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'datemin\')}',maxDate:'%y-%M-%d' })" id="datemax" class="input-text Wdate" style="width:120px;"> <input type="text" class="input-text" style="width:250px" placeholder="输入标题" id="title" name="title"> <button type="submit" class="btn btn-success"><i class="Hui-iconfont"></i> 搜用户</button> </div> </form> <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"> <a href="javascript:;" class="btn btn-danger radius delall"> <i class="Hui-iconfont"></i> 批量删除 </a> <a href="{{route('admin.article.create')}}" class="btn btn-primary radius"> <i class="Hui-iconfont"></i> 添加文章 </a> </span> <span class="r">共有数据:<strong>54</strong> 条</span> </div> <table class="table table-border table-bordered table-bg"> <thead> <tr> <th scope="col" colspan="9">文章列表</th> </tr> <tr class="text-c"> <th width="25"><input type="checkbox" name="" value=""></th> <th width="80">ID</th> <th width="100">文章标题</th> <th width="40">文章摘要</th> <th width="90">文章作者</th><th width="130">加入时间</th> <th width="100">操作</th> </tr> </thead> <tbody> </tbody> </table> </div>
<script> function search() { datatable.ajax.reload(); return false } var datatable = $('.table-bg').DataTable({ //下拉的分页数量 lengthMenu:[5,10,15,20,15,30,50,100], //隐藏搜索框 searching:false, //禁止排序 columnDefs:[ {targets:[0,6],orderable: false} ], //开启服务器操作 serverSide: true, ajax:{ url:"{{route('admin.article.index')}}", type:"GET", //获取事件和标题的值 data:function (ret) { ret.datemin = $("#datemin").val() ret.datemax = $("#datemax").val() ret.title = $("#title").val() } }, columns: [ // 总的数量与表格的列的数量一致,不多也不少 // 字段名称与sql查询出来的字段时要保持一致,就是服务器返回数据对应的字段名称 // defaultContent 和 className 可选参数 {'data':'aaaaa','defaultContent':'<input type="checkbox" name="" value="">'}, {'data':'id'}, {'data':'title'}, {'data':'desc'}, {'data':'author'}, // {'data':'body'}, {'data':'created_at'}, {'data':'btn'} ], }) //生成token var _token = "{{csrf_token()}}" //框架加载完成后触发 datatable.on('draw',function () { //给删除按钮绑定点击事件 $('.click').click(function () { let url = $(this).attr('href') layer.confirm('请确认此次操作?', { btn: ['确认','取消'] //按钮 },()=>{ $.ajax({ url, data:{_token}, type:"DELETE", dataType:'json', }).then(({code,msg})=>{ if (code == 200){ layer.msg(msg,{time:1000,icon:1},()=>{ location.replace(location.href) }) } }) }) return false }) }) </script>
php示例代码:
public function index(Request $request) { //判断是否过来的是否是ajax请求 //如果是进入分页方法里 if($request->ajax()){ $data=$request->all(); //获取开始的时间 $start_time = $data['datemin']; //获取结束的时间 $end_time = $data['datemax']; //获取文章标题的内容 $title = $data['title']; //设置查询对象 $query = Article::where('id',">",0); //判断三个条件都不为空 if (!empty($start_time) && !empty($end_time)){ $query = $query->whereBetween("created_at",[$start_time,$end_time]); } if (!empty($title)){ $query = $query->where('title','like',"%$title%"); } if ([$data['order'][0]['column']][0]!=0){ //获取排序方式 $order = $data['order'][0]['dir']; //获取排序字段 $column = $data['columns'][$data['order'][0]['column']]['data']; //执行 $query->orderby($column,$order); } //在这里面写ajax请求的代码 //接收偏移量 从那开始 $start=$request->get('start'); //接收每页显示条数 $length=$request->get('length'); $page=$query->offset($start)->limit($length)->get()->toarray(); //拼接返回前端需要的数据 //查询出总条数 $count=Article::count(); $result = [ 'draw' => $request->get('draw'), 'recordsTotal' => $count, 'recordsFiltered' => $count, 'data' => $page ]; return $result; } return view('admin.article.index'); }