laravel8 datatables 渲染页面 分页

引入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>

布局要展示的页面

<table id="table">
    <thead align="center">
        <th>ID</th>
        <th>账号</th>
        <th>手机</th>
        <th>所属角色</th>
        <th>状态</th>
        <th>创建时间</th>
        <th>操作</th>
    </thead>
    <tbody  align="center">

    </tbody>
</table>

初始化datatables

<!--第三步：初始化Datatables-->
$(document).ready( function () {
    $('#table').DataTable({
        // 开启分页
        paging:true,
        "aaSorting": [[ 0, "desc" ]],
        "columnDefs":[{
　　　　 'targets' : [1,2,3,4,5],    //默认不排序
　　　　 'orderable' : false
　　}],
        //关闭搜索
        "searching": false,
        // scrollY:500,
        //每页显示条数
        lengthMenu:[3,5,7,10],
        //开启服务器模式
        serverSide: true,

        //后端请求
        ajax:{
            url:'{{url('indexs')}}',
            type:'get'
        },
        //需要展示页面的数据
        columns:[
            //{'data':"字段名称",'defaultContent':"默认值",'className':"类名"}
            {'data':'id'},
            {'data':"username"},
            {'data':'phone'},
            {'data':'role_id'},
            {'data':'state'},
            {'data':"created_at"},
            {'data':"btn"},

        ]

    });
});

后端代码 实现渲染分页

public function indexs(Request $request)
{
    //查询数据库数据
    $data = User::all();
    //记录总条数
    $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 = User::offset($start)->limit($length)->orderBy($orderField,$dir)->get();
    //datatables 返回参数必选 一下四个
    $result = [
        'draw'=>$request->get('draw'),
        'recordsTotal'=>$total,
        'recordsFiltered'=>$total,
        'data'=>$data
    ];
    return $result;

}

model 模型层代码

protected $appends=['btn'];

    public function getBtnAttribute($value)
    {
        return "<button  onclick='del(this,".$this->id.")'>删除</button>";
    }