Question

Hallo，我有执行以下操作的MemberController：

public function anyData()
    {
        $members = DB::table('members')
            ->select(['id','email','firstname','lastname','address','zip','city','phone','mobile','work','birthdate']);


        return Datatables::of($members)
            ->addColumn('action', function ($id) {
                return '<a href="member/' . $id->id . '/edit" class="btn btn-primary">Edit</a>
                        <button class="btn" data-remote="/member/' . $id->id . '">Delete</button>
                  '; })->make(true);    
    }

这是用于获取包含数据表的JS代码：

<script type="text/javascript">

    var table = $('#datatable-member').DataTable({
        responsive: true,
        "language": {
            "url": "{{ asset('/plugins/datatables/lang').'/'.Config::get('app.locale').'.json'}}"
        },
        processing: true,
        serverSide: true,
        ajax: '{{ route('member') }}',
        columns: [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { data: 'id', name: 'id' },
            { data: 'email', name: 'email' },
            { data: 'firstname', name: 'firstname' },
            { data: 'lastname', name: 'lastname' },
            { data: 'address', name: 'address' },
            { data: 'zip', name: 'zip' },
            { data: 'city', name: 'city' },
            { data: 'phone', name: 'phone' },
            { data: 'mobile', name: 'mobile' },
            { data: 'work', name: 'work' },
            { data: 'birthdate', name: 'birthdate' },
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        order: [[1, 'asc']]
    }).$('.btn[data-remote]').on('click', function (e) {alert('test') })
    ;

</script>

表正确显示了数据，编辑链接和删除按钮正确显示，但是当我单击任何操作时，删除按钮中的操作（目前只有警报）不起作用。

我也在javascript上进行了尝试，但没有任何变化：

$('#datatable-member').DataTable().on('click', '.btn-delete[data-remote]', function (e) {alert('test') })

Answer 1

在Laravel删除框架中，您需要使用X-CSRF令牌进行表单验证。如果您正在使用Laravel资源，可以尝试使用以下代码发送正确的删除请求，但是请确保您的数据表编辑列使用的是btn-delete类，就像您现在使用的是btn课。

<script type="text/javascript">

var table = $('#datatable-member').DataTable({
    responsive: true,
    "language": {
        "url": "{{ asset('/plugins/datatables/lang').'/'.Config::get('app.locale').'.json'}}"
    },
    processing: true,
    serverSide: true,
    ajax: '{{ route('member') }}',
    columns: [
        {
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { data: 'id', name: 'id' },
        { data: 'email', name: 'email' },
        { data: 'firstname', name: 'firstname' },
        { data: 'lastname', name: 'lastname' },
        { data: 'address', name: 'address' },
        { data: 'zip', name: 'zip' },
        { data: 'city', name: 'city' },
        { data: 'phone', name: 'phone' },
        { data: 'mobile', name: 'mobile' },
        { data: 'work', name: 'work' },
        { data: 'birthdate', name: 'birthdate' },
        {data: 'action', name: 'action', orderable: false, searchable: false}
    ],
    order: [[1, 'asc']]
});

$('#datatable-member').on('click', '.btn-delete[data-remote]', function (e) { 
    e.preventDefault();
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    var url = $(this).data('remote');
    // confirm then
    $.ajax({
        url: url,
        type: 'DELETE',
        dataType: 'json',
        data: {method: '_DELETE', submit: true}
    }).always(function (data) {
        $('#datatable-member').DataTable().draw(false);
    });
});

Laravel 5.7.9的Yajra数据表中的“删除”按钮

1 个答案: