laravel8中Datatables ajax分页运用

肉松南瓜小贝

已于 2022-03-06 21:04:51 修改

阅读量281

点赞数

文章标签： jquery javascript css

于 2022-03-05 18:52:16 首次发布

本文链接：https://blog.csdn.net/zb0109/article/details/123299136

版权

本文档展示了如何在网页中引入Datatables.js库，结合jQuery实现表格的分页、排序功能。首先引入CSS和JS文件，然后创建表格结构，接着初始化Datatables并设置参数，包括不参与排序的列、分页、每页条数和服务模式。模型访问器用于生成复选框和操作按钮，模型修改器处理特定字段显示，如企业分类和分级。控制器部分展示如何处理后台数据请求，进行数据查询、排序和分页。

摘要由CSDN通过智能技术生成

引入datatables js、css等样式

<!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

表格：

    <table class="table table-border table-bordered table-bg" id="table_id_example">
        <thead>
        <tr>
            <th scope="col" colspan="10">企业列表</th>
        </tr>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="" value=""></th>
            <th width="40">ID</th>
            <th width="150">企业名称</th>
            <th width="90">组织机构代码</th>
            <th width="150">企业分类</th>
            <th width="150">所属分类</th>
            <th width="130">企业分级</th>
            <th width="100">城市</th>
            <th width="130">更新时间</th>
            <th width="100">操作</th>
        </tr>
        </thead>
        <tbody>
       
        </tbody>
    </table>

初始化Datatables

 $('#table_id_example').DataTable(
            {
                "aoColumnDefs": [
                    {"orderable": false, "aTargets": [0,2,3,4,5,6,7,8,9]},// 不参与排序的
                ],
                order:[[1,'desc']],
                // 开启分页
                paging: true,
                // 每页条数
                lengthMenu: [ 10, 25, 50, 75, 100 ],
                // 开启服务模式
                serverSide: true,
                searching:false,
                // 后端请求
                {{--"ajax: "{{url('showData')}}",--}}
                ajax:{
                    url:"{{url('showData')}}",
                },
                columns: [
                    {data: 'Checkbox'},
                    {data: 'id'},
                    {data: 'company'},
                    {data: 'code'},
                    {data: 'c_type'},
                    {data: 'industry'},
                    {data: 'level'},
                    {data: 'city'},
                    {data: 'updated_at'},
                    {data: 'Btn'},
                    {data: 'Show'},
                ]
            }
        );

使用模型访问器：字段里不存在的数据

protected $appends=["Checkbox",'Btn'];

    /**
     * 模型访问器添加复选框和删除按钮
     * @return string
     */
    public function getCheckboxAttribute(){
        $id=$this->id;
        return "<input type='checkbox' name='' value=''>";
    }
    public function getBtnAttribute(){
        $id=$this->id;
        return "<a href='http://www.day.com/index.php/companyDetailShow?id={$id}'><button>查看</button></a>
<a href='http://www.day.com/index.php/companyDel?id={$id}'><button>删除</button></a>";
    }

模型修改器：字段里有但是需要处理的

    /**
     * @param $value
     * @return string
     * 模型修改器更改类型
     */
    public function getCTypeAttribute($value)
    {
        $arr=[
            '1'=>'国有',
            '2'=>'民营',
            '3'=>'外资',
            '4'=>'外企',
            '5'=>'私有',
        ];
        return $arr[$value];
    }
    public function getLevelAttribute($value)
    {
        $arr=[
            '1'=>'市属',
            '2'=>'区属',
            '3'=>'县属',
        ];
        return $arr[$value];
    }

更改时间格式

   /**
     * @param \DateTimeInterface $date
     * @return string
     * 更改时间格式
     */
    protected function serializeDate(\DateTimeInterface $date)
    {
        return $date->format('Y-m-d H:i:s');
    }

控制器：


public function showData(Request $request)
    {
        if ($request->ajax()) {
            //查询数据
            $data = CompanyModel::get();
            //记录总条数
            $total = $data->count();
            //分页开始位置
            $start = $request->get('start');
            //分页结束位置
            $length = $request->get('length');
            //要搜索的数据
            $search = $request->get('search', []);
            //获取排序信息数组
            $orderArr = $request->get('order')[0];
            // 排序索引
            $column = $orderArr['column'];
            // 排序类型 升还是降
            $dir = $orderArr['dir'];
            // 排序字段
            $orderField = $request->get('columns')[$column]['data'];
            //分页
            $data = CompanyModel::orderBy($orderField,$dir)->offset($start)->limit($length)->get();
            //返回参数
            $result = [
                'draw' => $request->get('draw'),
                'recordsTotal' => $total,
                'recordsFiltered' => $total,
                'data' => $data
            ];
            return $result;
        }
        return view("index/admin-list");
    }