laravel8 datatables ajax分页 显示按钮

<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>".'&nbsp;'."<a href='http://127.0.0.1:8000/index?id=$id'>修改</a>".'&nbsp;'."<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>".'&nbsp;'."<a href='http://127.0.0.1:8000/edit?id=$id'>修改</a>".'&nbsp;'."<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'=>[]];
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值