laravel8 datatables 渲染页面 分页

1.引入datatables css js cdn 链接

<!--第一步：引入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>


<!--或者下载到本地，下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.21/media/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.dataTables.js"></script>

2.提前布局要展示的页面 注意数据库查出的数据无需写html标签

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>名称</th>
        <th>介绍</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

3.初始化datatables

<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table_id_example').DataTable({
        //开启服务器模式
        serverSide: true,
        aaSorting: [[ 1, "desc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "searching": false,//取消搜索框
        "aoColumnDefs": [
          //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
          {"orderable":false,"aTargets":[0,2,3,4,5,6,7,8,9,10]}// 制定列不参与排序
        ],
        // 开启分页
        paging:true,
        // scrollY:500,
        //默认倒序
        order:[[1,"desc"]],
        //每页显示条数
        lengthMenu:[10,25,50,75,100],
        //后端请求
        ajax:{
            url:'posts',
            type:'get'
        },
        //需要展示页面的数据
        columns:[
            {data:'id'},
            {data:'title'},
            {data:'text'},
            {data:'btn'}
        ]

    });
});

4.后端代码 实现渲染分页

//datatables 渲染页面
public function datatables(Request $request)
{
            //查询数据库数据
            $data = Firm::all();
            //记录总条数
            $total = $data->count();
            //获取排序信息数组
            $orderArr = $request->get('order')[0];
            // 排序索引
            $column = $orderArr['column'];
            // 排序类型 升还是降
            $dir = $orderArr['dir'];
            // 排序字段
            $orderField = $request->get('columns')[$column]['data'];
            //分页开始的位置
            $start = $request->get('start');
            //分页结束的位置
            $length = $request->get('length');
            //接收要搜索的数据
            $search = $request->get('search',[]);
            //分页
            $data = Firm::orderBy($orderField,$dir)->offset($start)->limit($length)->get();
            //datatables 返回参数必选 一下四个
            $result = [
                'draw'=>$request->get('draw'),
                'recordsTotal'=>$total,
                'recordsFiltered'=>$total,
                'data'=>$data
            ];
            return $result;
}

5.模型层造按钮

//访问器
    protected $appends=["Btn"];
    /**
     * 访问器
     * @return string
     */
    public function getBtnAttribute(){
        $id=$this->id;
        return "<a href='http://www.course.com/del?id={$id}'><button>删除</button></a>";
    }

本作品采用《CC 协议》，转载必须注明作者和本文链接