首页 > 解决方案 > 数据表在移动设备上删除行

问题描述

我使用 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");
   }         
            })


        });

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

如果我在计算机上使用该功能,它可以工作。但是如果我减小窗口的大小,它在一定大小下不起作用。

正常吗?我能做点什么吗?

感谢

标签: phplaraveldatatabledatatables

解决方案


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


推荐阅读