Question

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

<div>

这是我的JS：

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

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

Answer 1

它可能不起作用，因为当你在桌面上绑定你的点击事件时，其中没有任何元素。因此无法在名为.btn-delete[data-remote]的元素上绑定click事件。

如果你在桌面上绑定click事件并在.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) { 
    ...... 
});

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

Answer 3

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

解决方案需要在datatables DOM事件之后等待

来自https://datatables.net/reference/event/

的官方解决方案

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

Laravel yajra / Datatables动作删除无效

3 个答案: