Problem to delete a row in DataTables (works in v1 but not in v2)

slolo

Link to test case: https://live.datatables.net/nujinizi/1/edit
Debugger code (debug.datatables.net):
Error messages shown: "TypeError: Cannot read properties of null (reading 'nTr') at x ...
Description of problem: I have a small piece of code which work well with DataTables 1.13.11

I try to delete a row with DataTables v2.3.4

The code below works with v2 (extract from DataTables documentation)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    mytable.row($(this).parents('tr')).remove().draw();
});

But this one does not work with v2.x (but works with v1.x)

var mytable = $("#dttable").DataTable(dataTableParam);

$("body").on('click', 'button.btn[data-action="delete"]', function () {
    deleteRow(this);
});

function deleteRow(ele) {
    var objInfo = $(ele).closest("tr");
    mytable.row($(objInfo)).remove().draw("page");
}

I suppose that something has changed with the new version but I would like to understand what is the difference between the 2 pieces of code

Otherwise nothing to do, is there a chance that the problem with Bootstrap 4 and Cards is resolved with the SearchPanes component when it is positioned to the right in the layout?

Thanks in advance for your help and have a nice day.

allan

The problem is:

.draw("page");

Change it to be .draw(false) (keep paging the same), or .draw() (reset paging).

The problem with using 'page' is that passing that parameter explicitly tells DataTables not to update its paging - i.e. the deleted row is still in the list of rows to display.

In 1.x that was kind of okay (I suspect it would have caused other problems, but not throw an error) since it would remove the row from source array. 2.x however uses a sparse array, so that array entry gets nulled out. Thus when DataTables attempts to redraw the page, it sees a row which is no longer prevent, and throws an error.

Allan

allan

Otherwise nothing to do, is there a chance that the problem with Bootstrap 4 and Cards is resolved with the SearchPanes component when it is positioned to the right in the layout?

That isn't something that I have specifically looked into I'm afraid.

Allan

slolo

Thanks @allan for this quick reply.

You are right, if I change .draw("page"); to .draw(); it works but I lost the pagination and I want to stay on the current paging where I removed the row.

So, what is the good way to remove a row and stay on the current page?

allan

.draw(false)

allan

This is a bit of a footgun. I'll consider how I might improve that!

slolo

.draw(false)

That's what I tried after having posted my message.
It work's but it is not also smooth than before.

Indeed, .redraw(false) redraws the entire table but it also moves the screen to the top when it is redrawn (see the example below)

https://live.datatables.net/lacakixu/1/edit

Is there any way to avoid this behavior?

allan

That's very odd - Firefox doesn't do that, but Chrome does. I agree, that is rather jarring.

I've committed a change to address the original issue and 'page' can be used in this context again. Here is the example updated with the nightly version of DataTables:

https://live.datatables.net/lacakixu/2/edit

There could still be other things that go wrong, since the row has been deleted, but until I figure out why Chrome is jumping around there, then this seems like a sensible workaround.

Allan

slolo

Thanks for the fix.

I am not able to test it with your example.

On Chrome I still have the same behavior but it's probably due to something broken in the script (as you can see in the screenshot, something is wrong at initialization)

I hope the fix will be release soon in order to test it.

allan

It will likely be a few weeks before it is released, as that is the first change since 2.3.4 was released.

Allan