Datatable row deletions and rendering

RicOShea

Hi,
I have been exploring your Datatable libraries and implementing them in my web apps.
I have only just started web app development using Python's Flask and Jinja2, and discovered Datatables about a month ago, I must say this is pure brilliant! I gave my two thumbs up to your development team.

I have a couple of questions I hope you don't mind answering:

1. Upon rendering a datatable, in a blink of an eye I can see my normal table before it transforms into a datatable. Is there an option to, say, hide the generation of normal HTML table and display the datatable instead?

2.I have implemented a JS' Fetch and a jQuery to remove / delete a row using DOM manipulations

var x = document.getElementById(selectedID);
x.remove();

It works as intended, the desired record is deleted from the database and the row removed from the datatable on the current paginated page.
However, if I move back or ahead one page, and go back to the page where the deleted row was, the row appears again. It seems there is a cache table in the background, retaining original unedited values.

I am wondering if this is an untested scenario or my coding approach is not suitable for this.

Thank you very much for your time and awesome work.

regards,
Richard

kthorngren

1. I'm guessing your are rendering the HTML table using Flask. In this case you can hide the div, use style="display:none" on the div for example, that contains the HTML table then use initComplete to show the hidden div. Here is an example with a short delay to init Datatables to illustrate:
   https://live.datatables.net/nopifamu/123/edit

2. Datatables doesn't know about changes made when using Javascript or jQuery methods. See this FAQ. Use row().remove() instead. See the row-selector for options to use with the row() to select the desired row to delete. Maybe something like this based on your above code:

table.row( '#' + selectedID ).remove().draw();

@allan is the only one developing Datatables and associated extensions. I agree that it is a fantastic library.

Kevin

RicOShea

Hi Kevin,

Thank you so much for the prompt reply. I really appreciated that.
I managed to resolve question no 2 by using the row methods as advised.
I am yet to resolve no 1.

thanks & regards,
Richard

allan

Hi Richard,

I've sent a reply to these same two questions that you asked via the contact message before I saw your thread here. If you give me a link to your page I can take a look at the FOUC issue.

Allan

RicOShea

Hi Allan & Keith,
Thank you very much for you quick reply. I have managed to resolve both issues now thanks to your insights and extensive trials and errors.

Now I have got another issue OR maybe a bug.
I followed this https://datatables.net/reference/api/row.add() to add a row to a standard DT from the given examples. I slimmed down the table to only 7 rows, and am wanting to add a new one. But every time I run the html, it gives me the following error:

DataTables warning: table id=example - Requested unknown parameter '0' for row 7, column 0. For more information about this error, please see https://datatables.net/tn/4

The given link as it explains is a bit cryptic, and I tried to understand the explanations but doesn't make sense to me.
Can you please shed some light on what am I missing here? Thank you.

Below is the excerpt of the html and scripts
....
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011-01-25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script>
let table = new DataTable('#example');

table.row
.add({
    name: 'Zulu echo delta',
    position: 'unemployed',
    office: 'San Antonio',
    age: '51',
    start_date: '2011/04/25',
    salary: '$3,120'
})
.draw();

...

kthorngren

You will want to refer to the Data source types docs. You are initializing Datatables without using columns.data so Datatables expects the rows added to be an array not an object. There are two choices:

First you can add the row using an array, like this:

table.row
.add([
    'Zulu echo delta',
    'unemployed',
    'San Antonio',
    '51',
    '2011/04/25',
    '$3,120'
])
.draw();

Or you can define columns.data, like this:

let table = new DataTable('#example', {
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'age' },
        { data: 'start_date' },
        { data: 'salary' }
    ]
} );

Objects are typically better to use throughout the Javascript app because you don't need to keep track of which column a particular cell, like name, is in. You can change the table order without needing to change your app. However with arrays if you change the order then you wwill need to update your app to reference the new column index.

Kevin