Laravel yajra / Datatables操作删除不起作用 [英] Laravel yajra/Datatables action delete is not working

问题描述

hy，我现在使用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。'/ editclass =btn btn-primary>编辑< / a> 
< button class =btn-deletedata-remote =/ news / '。$ id-> id。'> Delete< / button>'; 
}） - > make（true）; 
} 
  

这是我的JS：

$ b $数据表（{
processing：true，
serverSide：true，
ajax ：'{!! route（'news.data'）!!}'，
列：[
{
className：'details-control'，
：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']]
}）;

//问题从这里开始
$（'＃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'）;
//确认然后
$ .ajax（{
url：url，
type：'DELETE'，
dataType：'json'，
data：{方法：'_DELETE'，submit：true}
}）always（function（data）{
$（'＃news-table'）。DataTable（）。draw（false）;
}）;
}）;

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

解决方案

它可能不工作，因为在桌面上绑定你的点击事件没有任何元素。因此，不可能在名为 .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'）; 
 //确认然后
 $ .ajax（{
 url：url，
 type：'DELETE'，
 dataType：'json '，
 data：{method：'_DELETE'，submit：true} 
}）always（function（data）{
 $（'＃news-table'）DataTable .draw（false）; 
}）; 
}）; 
 
 //或者也许这个
 $（'＃news-table'）。DataTable（）。on（'click'，'.btn-delete [data-remote]'，function （e）{
 ...... 
}）; 
  

hy, i'm now using L5 and yajra/datatables plugin, everything work fine until i create delete button to delete record, the delete button is not working
here is my controller :

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

Here is my 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);
    });
});

the JS event for btn-delete[data-remote] is not working, it's no return error in console, but nothing happen when i click it

解决方案

Its maybe not working because one the moment you binding your click event on the table there isn't any elements in it. And so its not possible to bind the click event on an element named .btn-delete[data-remote].

Maybe it works if you bind the click event on the table and let it trigger if clicked on .btn-delete[data-remote], like:

$('#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) { 
    ...... 
});

这篇关于Laravel yajra / Datatables操作删除不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！