数据表在移动设备上删除行

Question

我将laravel与datatable一起使用以显示大数据表。

每行末尾都有一个删除按钮，用于从数据库中删除记录。 我使用ajax，如果成功，则删除该行。

它可以在台式机上很好地工作，但不能在移动设备上工作（除非我设置了计算机版本）。

这是我的桌子：

<table class="datatable table table-striped- table-bordered table-hover table-checkable" id="m_table_1">
    <thead>
        <tr>
            <th>Numéro</th>
            <th>Bâtiment</th>
            <th>Nature</th>
            <th>Options</th>
        </tr>
    </thead>
</table>

我的js加载数据：

 var table =     $('.datatable').DataTable({
        responsive: true,
        ajax: '{{ route('lots.clientSide') }}',
        deferRender: true,
        scrollY: '500px',
        scrollCollapse: true,
        scroller: true,
        stateSave:      true,
        select: true,
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.16/i18n/French.json",
            select: {
        rows: "%d éléments sélectionnés"
    }
        },   
        columns: [
            { data: 'id' },
            { data: 'batiment.nom', defaultContent: "----" },
            { data: 'nature' },
            { data: null }
        ],
        columnDefs:[
            {targets:-1,title:"Options",width: "10%",orderable:!1,render:function(a,t,e,n){
            var slug = e.id;
            var url = 'show';
            var url_delete =  "lots/delete/"+e.id;
            return '\n<a href="'+url+'" class="m-portlet__nav-link btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" title="View">\n'+
            '<i class="la la-eye"></i>\n'+
            '</a>'+
            '<span class="dropdown">\n'+
            '<a href="#" class="btn m-btn m-btn--hover-brand m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="dropdown" aria-expanded="true">\n'+
            '<i class="la la-ellipsis-h"></i>\n'+
            '</a>\n'+
            '<div class="dropdown-menu dropdown-menu-left">\n'+
            '<a class="dropdown-item" href="#"><i class="la la-edit"></i> Editer</a>\n'+
            '<button class="delete dropdown-item" data-href="'+url_delete+'"><i class="la la-trash"></i> Supprimer</button>\n'+
            '</div>\n'+
            '</span>\n'

            }}
        ]
    });

和我的代码删除：

$(document).on('click', '.delete', function(e){
            var $this = $(this);
            table.row($this.parents('tr')).remove().draw(false);
            alert("click");
            $.ajax({
                    type: 'GET',
                    url: $this.data('href'),
                    dataType: 'json',
                    success: function( data ) {

   },
   error: function(xhr, status, error) {
     alert("fail");
   }         
            })


        });

我尝试使用计算机上的调试工具，但控制台上什么也没有。

如果我在计算机上使用该功能，它将起作用。 但是，如果我减小窗户的尺寸，则在一定尺寸下无法使用。

正常吗？ 我可以做些什么吗？

谢谢

Answer 1

我设法通过不隐藏移动设备上的删除按钮来避免此问题。