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

Question

I use laravel with datatable to display large data table.

I have a delete button at the end of each row to delete record from my database. I use ajax and if it's a success I remove the row.

It work well on desktop but it doesn't work on mobile (except if I set computer version).

Here my table :

<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>

My js to load data :

 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 '
<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">
'+
            '<i class="la la-eye"></i>
'+
            '</a>'+
            '<span class="dropdown">
'+
            '<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">
'+
            '<i class="la la-ellipsis-h"></i>
'+
            '</a>
'+
            '<div class="dropdown-menu dropdown-menu-left">
'+
            '<a class="dropdown-item" href="#"><i class="la la-edit"></i> Editer</a>
'+
            '<button class="delete dropdown-item" data-href="'+url_delete+'"><i class="la la-trash"></i> Supprimer</button>
'+
            '</div>
'+
            '</span>
'

            }}
        ]
    });

And my code for the remove :

$(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");
   }         
            })


        });

I tried with debug tools on computer and I've got nothing on console.

If I use the function on computer, it work. But if I reduce size of the windows, it doesn't work under a certain size.

Is it normal ? Can I do something about it ?

Thank

Answer 1

I manage to avoid this problem by not hidding delete button on mobile.