Use of HTML5 data-sort attribute

Bruce Warmer

Hi,

I am trying to use the API for adding a row, with all of the HTML for that row.

E.g
let row = $("<tr><td data-sort='1'>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25<td><td>3,120<td></tr>");
table.row.add( row );

However I am unable to get the sorting to work.

I have modified an existing example, and cloned it. Sorting the resultant table on the name does not sorrt it based on the contained data-sort values for the column.

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

Whilst I appreciate there are other ways to achieve the above adding of a row, I have chosen this approach aa my data contains a lot of formatting, graphics, etc. in the columns. All that works well, it is just getting the data-* attributes working that is the challenge.

All advise gratefully received.

Thanls,

Bruce.

kthorngren

The problem with using HTML5 data attributes is the attribute must be in the HTML table
at initialization for Datatables to use them. I updated your example with one existing row to demonstrate:
https://live.datatables.net/jodevoru/1/edit

Kevin

Bruce Warmer

Hi Kevin,

Thanks, though as the data comes from a server-side call I cannot use this approach.

Bruce.

kthorngren

Maybe make the first row an empty row. Then remove ( row().remove() ) it before you start adding new rows. For example:
https://live.datatables.net/vadusica/1/edit

Kevin

Bruce Warmer

Thanks. Interesting solution.

I need to work with this as I have a waiting timer initially set as the empty table value, while it waits for the server-side call to return, which is then replaced it if there are not entries.

Much appreciated,

Bruce.

Bruce Warmer

Hi Kevin,

Thanks for the answer. I have worked this into my solution and I simply remove the dummy row as soon as the datatable has been created, and before I call the server-side code that does the population. That way the empty table string kicks in (I have a waiting timer).

Thanks again.

Bruce.