Laravel yajra/Datatables 动作删除不起作用答案

【问题标题】：Laravel yajra/Datatables action delete is not workingLaravel yajra/Datatables 动作删除不起作用
【发布时间】：2016-03-26 00:37:12
【问题描述】：

你好，我现在正在使用 L5 和 yajra/datatables 插件，一切正常，直到我创建删除按钮来删除记录，删除按钮不起作用
这是我的控制器：

public function data() 
{
    $news = DB::table('news')
        ->join('users', 'news.user_id', '=', 'users.id')
        ->select(['news.id', 'news.judul', 'news.gambar', 'users.name']);

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

这是我的 JS：

var table = $('#news-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('news.data') !!}',
        columns: [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {data: 'id', name: 'news.id'},
            {data: 'judul', name: 'news.judul'},
            {data: 'name', name: 'users.name'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        order: [[1, 'asc']]
    });

//problem starts here
$('#news-table').DataTable().$('.btn-delete[data-remote]').on('click', 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) {
        $('#news-table').DataTable().draw(false);
    });
});

btn-delete[data-remote] 的 JS 事件不起作用，控制台中没有返回错误，但是当我单击它时没有任何反应

【问题讨论】：

标签： javascript jquery datatables laravel-5.1

【解决方案1】：

它可能不起作用，因为在您将点击事件绑定到表格的那一刻，其中没有任何元素。因此无法将 click 事件绑定到名为 .btn-delete[data-remote] 的元素上。

如果你在桌子上绑定点击事件并让它在点击.btn-delete[data-remote]时触发它可能会起作用，比如：

$('#news-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
    $.ajax({
        url: url,
        type: 'DELETE',
        dataType: 'json',
        data: {method: '_DELETE', submit: true}
    }).always(function (data) {
        $('#news-table').DataTable().draw(false);
    });
});

// or maybe this
$('#news-table').DataTable().on('click', '.btn-delete[data-remote]', function (e) { 
    ...... 
});

【讨论】：

感谢约拉姆。它现在正在工作。，你的回答对我有很大帮助
太棒了！这对我有很多帮助

【解决方案2】：

我认为您将动态数据与您的表绑定，因此它不会直接影响click。所以你可以使用$('body') 或$(document) 来触发click 事件。此外，您可能需要评论/删除 e.preventDefault(); 。这也会停止进一步的进程。

所以更新后的代码会是这样的：

//problem starts here
$('body').on('click', $('#news-table').DataTable().$('.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) {
        $('#news-table').DataTable().draw(false);
    });
});

【讨论】：

@ARUNMadathil 伟大

【解决方案3】：

这是因为删除按钮在构建数据表之前无法绑定。

解决方案是需要在数据表 DOM 事件之后等待

来自https://datatables.net/reference/event/的官方解决方案

$('#myTable').on('draw.dt', function () {
    alert('Table redrawn');
    // do the button binding work..
});

【讨论】：