Add delete button in Yajra Datatables in Laravel 5.4

Shaikhul Saad picture Shaikhul Saad · Oct 2, 2017 · Viewed 10.2k times · Source

I am now using Laravel 5.4 and Yajra Datatables plugin. Everything work fine but delete doesn't work. My url goes like this... http://localhost:8000/admin/view/%7B%7B%20route('admin.faculty.destroy',%20$faculties-%3Eid)%20%7D%7D

Here is my controller :

public function getFacultiesData()
{
    $faculties = faculty::select(['id','name','designation','email','mobile', 'updated_at']);
    return Datatables::of($faculties)
    ->addColumn('action', function ($faculties) {
            return '<a href="/admin/faculty/'.$faculties->id.'/edit" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i> Edit</a>
                <form class="form-group" action="{{ route(\'admin.faculty.destroy\', $faculties->id) }}" method="POST">
                    <input type="hidden" name="_method" value="DELETE">
                    <button class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-trash"></i>Delete</button>
                </form>    ';})
        ->editColumn('updated_at', function ($faculties) {
            return $faculties->updated_at->diffForHumans();
        })
        ->filterColumn('updated_at', function ($query, $keyword) {
            $query->whereRaw("DATE_FORMAT(updated_at,'%Y/%m/%d') like ?", ["%$keyword%"]);
        })
        ->make(true);
}

Here Is my js

$(function() {
$('#faculties-table').DataTable({
    processing: false,
    serverSide: true,
    ajax:'http://localhost:8000/admin/get/faculties/data',
    columns: [
    {data: 'name'},
    {data: 'designation'},
    {data: 'email'},
    {data: 'mobile'},
    {data: 'updated_at'},
    {data: 'action', name: 'action', orderable: false, searchable: false}
    ]});
});

Edit is working perfect

Answer

Shaikhul Saad picture Shaikhul Saad · Oct 2, 2017

I have solved it. In controller I just use <button class="btn btn-xs btn-danger btn-delete" data-remote="/admin/faculty/' . $faculties->id . '"><i class="glyphicon glyphicon-trash"></i>Delete</button> instead of form. And use ajax call on view page

$('#faculties-table').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
    if (confirm('Are you sure you want to delete this?')) {
        $.ajax({
            url: url,
            type: 'DELETE',
            dataType: 'json',
            data: {method: '_DELETE', submit: true}
        }).always(function (data) {
            $('#faculties-table').DataTable().draw(false);
        });
    }else
        alert("You have cancelled!");
});