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">&#xe665;</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">&#xe6e2;</i> 批量删除
            </a>
            <a href="{{route('admin.article.create')}}" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</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');
    }

 

posted @ 2021-03-17 10:09  jerry_min  阅读(321)  评论(0编辑  收藏  举报