laravel8 datatables ajax分页

参考datatables官网  http://datatables.club/

第一步：引入文件

第二步：HTML

    

        

            
ID
            
用户名
        
    
    

    
    

第三步：初始化Datatables

$(document).ready( function () {
    $('#table_id_example').DataTable();
} );

下面开始正文

js代码

$(document).ready( function () {
        $('#table_id_example').DataTable({
            lengthMenu:[10, 25, 50, 75, 100],  //下拉分页参数
            ordering:false,  
            searching:false, //关闭自带搜索功能
            serverSide:true, //开启服务端分页
            processing:true,
            //发送ajax请求
              ajax:{
                  url:"http://www.***.com/",
                  dataType:'json',
                  type:'get',
            },
            //这里自动填充后端返回的数据
            "columns":[
                {'data':'id'},
                {'data':'name'},
            ],
            });
    } );

后端代码  返回之后数据自动填充

pubilc funciton index()
{
    //判断是否是ajax请求，不是ajax请求返回的是你刚才的初始页面
    if ($request->ajax()) {
            $start = $request->get('start', 0);
            $length = $request->get('length', 10);
            //获取分页数据
            $data = User::offset($start)->limit($length)->get();
            //数据总条数
            $total = Firm::count();
            //返回的格式必须有这几个参数
            return  [
                //draw是ajax自动发送的，但是需要返回
                'draw' => $request('draw'),
                'recordsTotal' => $total,
                'recordsFiltered' => $total,
                //查询的数据
                'data' => $data,
            ];
        }
    return view('amdin.user');
}

默认是没有删除按钮的  这时候你可以使用 

id;
        return "点击删除";
    }
}

js也需要添加    前端多添加一行就可以了

$(document).ready( function () {
        $('#table_id_example').DataTable({
            lengthMenu:[10, 25, 50, 75, 100],  //下拉分页参数
            ordering:false,  
            searching:false, //关闭自带搜索功能
            serverSide:true, //开启服务端分页
            processing:true,
            //发送ajax请求
              ajax:{
                  url:"http://www.***.com/",
                  dataType:'json',
                  type:'get',
            },
            //这里自动填充后端返回的数据
            "columns":[
                {'data':'id'},
                {'data':'name'},
                {'data':'delete'},
            ],
            });
    } );

这样一个简单的ajax分页和动态删除就好了