Html to JS Datatable : Still show a removed row after sorting or page size change?

Question

I have an html table with id:#mytable in my asp.net-4.5 webpage, which is created in the c# site and sending to the aspx. In this Html table, at the end of each row there is a DELETE button like below:

...
html.Append("<td><input type=\"button\" runat=\"server\" value=\"Delete\" onclick=\"deleteRow(this)\" /></td>");

When this button is clicked, deleteRow(this) function is triggered with the code below:

btn.parentNode.parentNode.parentNode.removeChild(row);

When this line above runs, the regarding row is being immediately deleted and I do not see the row in the screen anymore.

This html table is represented as a datatable (javascript) like below:

$('#myTable').on('error.dt', function (e, settings, techNote, message) {
                            console.log('An error has been reported by DataTables: ', message);
                        }).DataTable({ fixedColumns: true,
                        "columnDefs": [{
                            "width": '60%',
                            "defaultContent": "-",
                            "targets": "_all"
                        }]
                    });;

This is also working well, my html table turns into a datatable. My problem is, after I delete a row from the table, if I change the sorting, or entry limit per page (10 by default) etc., I start to see the row I have just removed on the page, inside the table. It seems like my deleteRow function deletes the row not permanently. How can I fix this issue? Any help will be so appreciated.

EDIT: I needed to refresh the page after delete button click with JS: document.location.reload(true) and page_load re-reads the data, to fix the issue. Thanks @NTR and @J E Carter II

EDIT2: Using $('#myTable').DataTable().rows(row).remove().draw(false); while removing the row fixed the issue without the need of re-read data from DB. Check my answer.

It looks like maybe your table refreshes with the data from the server when you sort. You might need to save your table to server when you delete a row since right now you only remove the record front-end. — Word Rearranger, Jan 25 '19 at 17:03
@NTR how?? When I debug the HTML table on browser, I see the row is being removed, but changing something like a sort order refreshes the html table and bringing back the removed rows. I am not clearly understand what to do. — Eray Balkanli, Jan 25 '19 at 17:16

score 2 · Accepted Answer · answered Jan 25 '19 at 18:20

As @NTR and @J E Carter II stated, re-reading the data solves the issue perfectly. However my main purpose here is not to re-read the data from the DB, I was looking for a solution providing that and found something. All I did is to change the row btn.parentNode.parentNode.parentNode.removeChild(row); into $('#myTable').DataTable().rows(row).remove().draw(false); and it works perfectly, after the table is refreshed the removed data is not seen on the screen. Here is the complete ajax function:

var row = btn.parentNode.parentNode;
$.ajax({
           type: 'POST',
           url: 'DataManagementPage.aspx/DeleteRowFromMyDatabase',
           data: JSON.stringify({ id: id, grId:grID, city: city }),
           contentType: 'application/json; charset=utf-8',
           dataType: 'json',
           success: function (msg) 
           {
              $('#myTable').DataTable().rows(row).remove().draw(false);   
           }
});

The topic @NTR provided also offers a solution in server side: Deleting specific rows from DataTable

EDIT: Please note that DeleteRowFromMyDatabase returns true after the removal in DB.

score 1 · Answer 2 · answered Jan 25 '19 at 17:26

1

Javascript is a client side technology it does not have the ability to communicate with a database. Your table is generated from the database with your server side .NET code. To accomplish what you want, you need to also delete the row in your database. To communicate with your server side code, you can use AJAX : AJAX introduction. AJAX is a big subject, you might have to do additional research.

So, in your deleteRow function you will have to delete the row client side like you are doing now and then, using ajax, delete the row server side.

Hope it helps !

answered Jan 25 '19 at 17:26

Word Rearranger

1,306
1
16
25

There is already AJAX in the code actually. The table is coming from the database at the beginning. But then deleteRow(this) function is triggered, it is actually using AJAX to remove the related row from the database as well. So the data is removed from DB and from the html table. I don't want to re-read the data from the database. – Eray Balkanli Jan 25 '19 at 17:28
I already have it in html table, and my row is shown removed. Just only problem here that after my table representation is refreshed by re-sorting, the removed row is shown in the table, but it is definitely removed in DB. – Eray Balkanli Jan 25 '19 at 17:29
Thanks, it helped! – Eray Balkanli Jan 25 '19 at 17:42
@ErayBalkanli at the same time you remove the row from the database you might have to remove the row from the DataTable also. I'm not sure what else could cause the problem. – Word Rearranger Jan 25 '19 at 17:44
how can I remove a from from a DataTable? I am removing it from my html table but maybe need to remove it from datatable after calling .DataTable() function in aspx? any idea? – Eray Balkanli Jan 25 '19 at 17:46

score 1 · Answer 3 · answered Jan 25 '19 at 17:30

You will have to reinitialize the data table with a fresh ajax call or mutated object. Your removal code is only taking out the rendered row, not the data that drives it, so when you call a redraw with sort, it is correctly rendering the state of the model, regardless of what mutations have occurred in the DOM.

I know you say you don't want to reread the data, but that is the correct thing to do. The remote data is the source of truth for your rendered datatable.

Html to JS Datatable : Still show a removed row after sorting or page size change?

3 Answers3