第一步
进行样式的引入样式操作
<!--第一步:引入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 可以调用模型层设置点击事件名称