laravel8 datatables ajax分页

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

第一步：引入文件

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

第二步：HTML

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
        </tr>
    </thead>
    <tbody>
    <!--    ajax  这里不需要进行填写内容  -->
    </tbody>
</table>

第三步：初始化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');
}

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    //追加字段，使用集合访问器
    protected $appends=['delete'];

    public function getDeleteAttribute()
    {
        //动态获取id
        $id = $this->id;
        return "<button>点击删除</button>";
    }
}

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分页和动态删除就好了