<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_id_example" class="display table-sort">
<thead>
<tr>
<th>ID</th>
<th>公司名称</th>
<th>手机号</th>
<td>类型</td>
<td>产业</td>
<td>层次</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id_example').DataTable({
// 开启分页
paging:true,
// scrollY:500,
//每页显示条数
lengthMenu:[10,25,50,75,100],
//开启服务器模式
serverSide: true,
"ordering": true,
"searching": false,
columnDefs:[{
'targets' : [1,2,3,4,5,6], //除第六,第七两列外,都默认不排序
'orderable' : false
}],
// "order": [[0, 'desc' ]],
//后端请求
ajax:{
url:'{{route('index')}}',
type:'get'
},
//需要展示页面的数据
columns:[
{data:'id',orderData:[0,1]},
{data:'company'},
{data:'code'},
{data:'c_type'},
{data:'industry'},
{data:'level'},
{data:'city'},
//按钮名称
{data:'caption'}
]
});
});
</script>
//在模型层 先定义字段名称
protected $appends = ['caption'];
//方法进行渲染 注意自己的链接
public function getCaptionAttribute()
{
$id = $this->id;
return "<a href='http://127.0.0.1:8000/index?id=$id'>查看</a>".' '."<a href='http://127.0.0.1:8000/index?id=$id'>修改</a>".' '."<a href='http://127.0.0.1:8000/index?id=$id'>删除</a>";
}
或者
protected $appends = ['caption'];
public function getCaptionAttribute()
{
$id = $this->id;
return "<a href='http://127.0.0.1:8000/look?id=$id'>查看</a>".' '."<a href='http://127.0.0.1:8000/edit?id=$id'>修改</a>".' '."<a href='javascript:;' onclick='article_del(this,$id)'>删除</a>";
}
//获取ajax调用方法
function article_del(obj,id){
console.log(id);
$.ajax({
type: 'get',
url: '{{route('del')}}',
dataType: 'json',
data:{id},
success: function(data){
// console.log(data);
$(obj).parents("tr").remove();
layer.msg('已删除!',{icon:1,time:1000});
},
error:function(data) {
console.log(data.msg);
},
});
}
//模型层
public function del(Request $request)
{
$id=$request->get('id');
Company::where('id',$id)->delete();
return ['code'=>200,'msg'=>'success','data'=>[]];
}
laravel8 datatables ajax分页 显示按钮
于 2022-03-05 10:57:47 首次发布