Кнопка «Удалить» в Yajra Datatables в Laravel 5.7.9 - PullRequest
Новая
       13

Кнопка «Удалить» в Yajra Datatables в Laravel 5.7.9

0 голосов
/ 25 октября 2018

Привет. У меня есть 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') })

1 Ответ

0 голосов
/ 25 октября 2018

Из инфраструктуры Laravel для удаления вам необходимо пройти проверку формы с помощью X-CSRF Token.Попробуйте сделать это, чтобы отправить правильный запрос на удаление, если вы используете ресурс 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);
    });
});

...