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

Question

你好，我有 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);
    });
});