add data-order attribute in the JSON data source

BTarek

Hello guys
im trying to add the rows in my datatable with JSON method using :

var TB = $("#TableId").DataTable();
var JsonData = JSON.parse('[["0":"Jean", "1":"Smith"]]');
TB.rows.add(JsonData).draw();

with this code the result is :

<td>Jean</td>
<td>Smith</td>

but i need to create the rows with "data-order" attribute like

<td data-order="1">Jean</td>
<td>Smith</td>

any one can help me, please

Thank You

yericus

So I was trying to understand your question and it seems your title does not reflect your post content.

"Add data-order attribute in the json data source"

But what you want is for the first name <td> to be generated with a data attribute.

I thought about using render to do that but we don't have access to the td during the rendering I think.

But from your question, the data-order attribute is not dynamic.
You should be able to give a class to your td through columndefs, then, AFTER your table is rendered to select all the td elements with that class in javascript and give them the data attribute.

Something like
Document.queryselectorAll(td.classnamegiven)
Should give you an array of all the TDS with that class name.

Then you should iterate them in a loop with the length of the obtained array to give them the data attribute.

Note that if I remember correctly, a data attribute has first to be declared in your page, should look how to do that properly online.

Good luck

yericus

Example for the loop apples on something different :
https://stackoverflow.com/questions/33178114/using-queryselectorall-to-change-the-style-property-of-multiple-elements

Create and set a data attribute :
https://www.w3schools.com/jsref/met_element_setattributenode.asp

kthorngren

You can use columns.createdCell to apply attributes to the td. However I'm not sure that Datatables will pickup HTML5 data attributes for sorting from Javascript data. From what I remember, I could be wrong though, Datatables will only use the HTML5 data attributes from DOM sourced tables. You can test to make sure though.

I suggest using columns.render for your orthogonal data as descried here. You can manipulate the sort operation however you need.

But based on what you posted it looks like you want to sort the first name column based on the order of the last name. If thats the case it might be easier to use columns.orderData.

If you still need help please build a simple test case showing what you have so we can help. The dataset you show [["0":"Jean", "1":"Smith"]] should result in an error when using JSON.parse('[["0":"Jean", "1":"Smith"]]');. A test case will allow us to see exactly what you have and how you are loading the data into the table.

Kevin

yericus

Should probably erase my answer which was wrong !

BTarek

hello guys
thanks for your support,
in this exemple :
https://datatables.net/examples/data_sources/ajax
the HTML rows inserted is like :
<td>exemple</td>

using the same method, i need insert the rows like :
<td data-order="exemple" data-filter="exemple">exemple</td>

Thank you

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

BTarek

Hello Colin
this is the result

colin

Yep, I'm seeing that too, here. We'll take a look and report back,

Colin

allan

The problem that is shown in Colin's example is that there are no rows in the HTML table, so DataTables' automatic finding of data-* attributes can't find anything and thus it isn't setup. (If you are interested, this is the code that does that).

I think we need to step back to understand what you are trying to do. You can add a data-order attribute simply using rowCallback, but it wouldn't sort on that. Do you need that attribute, or is it that you want to control the ordering more?

Perhaps you can show me a sample of the data you are loading into the table please?

Thanks,
Allan