Delete button in Yajra Datatables in Laravel 5.7.9

Question

Hallo I have the MemberController with this action:

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);    
    }

This is the JS Code to get the table with the datas:

<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>

The tables shows the data correctly, the edit link and delete button appears correctly but the action (at the moment only an alert) in the delete button is not working, when i click nothing happens.

I tryied also this on the javascript but nothing changed:

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

Answer 1

From Laravel framework for delete you need to have form validation by using X-CSRF Token. Try this to send a proper request for delete if you are using Laravel resource you can use below code, but make sure your datatable edit column are using the btn-delete class, as you are right now using the btn class.

<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);
    });
});