datables实现服务端分页并展示按钮传递ID值

第一步

进行样式的引入样式操作

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

第二步

引入 HTML 代码， tboy 中可有不用进行 foreach 循环操作

<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <td>性别</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

第三步

进行 datables 的初始化操作

$(document).ready( function () {
    $('#table_id_example').DataTable({
        // 开启分页
        paging:true,

        // scrollY:500,
        //每页显示条数
        lengthMenu:[3,5,7,10],
        //开启服务器模式
        serverSide: true,

        //后端请求
        ajax:{
            url:'{{route('admin.doctor.datatables')}}',
            type:'get'
        },
        //需要展示页面的数据
        columns:[
            {data:'id'},
            {data:'name'},
            {data:'age'},
            {data:'sex'},
        ]

    });
});

第四步

进行控制器的书写操作

        //判断是否是ajax

        if ($request->ajax()) {
            // 开启位置
            $start = $request->get('start', 0);
            // 获取记录数,健壮一点取最小值
            $length = min(100, $request->get('length', 10));

             // 获取数据
            $data = Article::offset($start)->limit($length)->get();

            //记录总数
            $total = Article::count();

            /*
            draw: 客户端调用服务器端次数标识
            recordsTotal: 获取数据记录总条数
            recordsFiltered: 数据过滤后的总数量(和上面记录总数是一样的，无需理会)
            data: 获得的具体数据
            注意：recordsTotal和recordsFiltered都设置为记录的总条数
            */
            $result = [
                'draw' => $request->get('draw'),
                'recordsTotal' => $total,
                'recordsFiltered' => $total,
                'data' => $data
            ];

            //返回数据
            return $result;

        }

第五步

模型层追加字段操作，展示出按钮的方式

并且传递出 ID 的操作，可以执行删除、修改等操作

    //另请别名
    protected $appends=['action'];
    public function getActionAttribute()
    {
        return '
            
        //这个是详情的按钮，设置点击事件，并传递当前this，并指明ID数值
        <button><a href="#" onclick="xq(this,'.$this->id.')">详情</a></button>

        //这个是删除的按钮，设置点击事件，并传递当前this，并指明ID数值
        <button><a href="#" onclick="delete_btn(this,'.$this->id.')">删除</a></button>
        ';
    }

第六步

到达前端，并且去调用去使用它

使用 action 调用模型层的按钮 

使用 function 可以调用模型层设置点击事件名称