Delete button in row not working when table is collapsed with Responsive Datatables

Matt_T

I have a delete button inside my row that works fine as long as the table is not collapsed at all. As soon as I collapse the table down though, the row no longer deletes.

$('.dataTable').on('click', '.delete', function(e) {
                
                e.preventDefault();
                
                var nRow = $(this).closest('tr')[0];
                            
                $.confirm({
                    text: "Are you sure you want to delete the user?",
                    confirm: function() {
                            
                            oTable.row(nRow).remove().draw();
                            
                    },
                    cancel: function() {
                            // nothing to do
                    }
                    
                });

The confirmation prompt still fires when the table is collapsed and button is clicked, again it just doesn't remove the row.

Thank you for any thoughts,

Matt

jLinux

I believe its because you're assigning the value of nRow to a DOM element, which if the table is collapsed, I dont believe the DOM elements there.. (Check through the browser elements to verify though).

But if its not in the DOM, and you're using it in oTable.row(nRow).remove().draw();, then thats definitely the reason.

Matt_T

Thanks jLinux!

That makes sense, but it seems to happen if I pass a jquery object as well.

Maybe I'm just approaching the problem incorrectly? I would think the built in row removal function would work be it in a regular datatable or a responsive one.

Thanks again for your insight,

Matt

jLinux

Just because its a jquery object, doesnt change the fact its not in the dom

Use fatatables api to delete it. rows().delete()

And use the rows().indexes() to get the indexes to delete

Matt_T

Thanks again, that was what I needed :)

Matt

jLinux

Im curious, how is it deleting a collapsed row, if the button is in that row?..

You find the button via:

var nRow = $(this).closest('tr')[0];

so it gets the row its in, right? Hows it collapsed.

If I know, then maybe I can replicate it. Is the website its on accessible?

allan

I'm not quite clear on what you mean by "collapsed" in this case. Is it removed from the DOM, display:none or height:0?

Allan

Matt_T

Hi Allan, Thanks for taking a look.

I am using datatables-responsive, what I mean is when the table is collapsed to phone width. Sorry if I was confusing. Right now I'm just working to visually remove the row when a delete button is clicked and will be deleting the row via AJAX. I can use straight jquery or the dt remove functions and they both work fine on the table when no columns are hidden. As soon as I hide even one column, the button no longer works. I'm guessing because the structure is being changed to parent/child row?

Love datatables, this is one of the very few hangups I have had, and I'm sure it's my fault :)

Thanks again,

Matt

allan

Hi Matt,

Is the delete button getting bumped into the child row? It works when in the parent row, but not in the child row - is that correct?

If so, try using the responsive.index() method to get the row index from the li element where the click occurred (you'll need to add a check to determine if it was in the child row or not) - that will give you the row index and you can then use that with row().remove().

A bit messy - I've not find a better way of doing it yet!

Allan