ajax and html5- options
ajax and html5- options
Thanks in advance for any ideas.
datatables 1.10.16
jquery 1.10.2
We are loading data via ajax and want to sort using the html5 data-order column. What i've tried to tap into the createdCell, but that didn't seem to work.
`
var setSortOrder = function(...) {
console.log('setting sort order: ' + cellData); // prints value to browser console
$(td).data('order', cellData);
console.log('fetching sort order: ' + $(td).data('order')); // brings back the same value from above
}
...
"columns": [
{"data": renderCell, "createdCell": setSortOrder, "type": "html", "width:"7%"}
...
],
"createdRow": function(...) {
$(row).find('td:eq(0)').data('order', data.name); // does not set any dom
$(row).find('td:eq(0)').attr('data-order', data.name); // does set dom - but does not sort properly in datatables
}
`
The setSortOrder is called, but nothing is set on the DOM and sorting does not work. I then utilized the createRow callback, which by my comments above seems to work with jquery attr(), but not data().
Ultimately the data does not sort. Any thoughts.
This question has an accepted answers - jump to answer
Answers
Looking deeper in the community support forums, I found that jquery attr is better to use, and I'm seeing the data element show in the rendered page. However, it is still not sorting correctly on the data-order data element. I guess I left out that render also places an html span tag in the cell, and all these are sorted to the top of the list.
Looking deeper in the community support forums, I found that jquery attr is better to use, and I'm seeing the data element show in the rendered page.
https://datatables.net/forums/discussion/46675/changing-data-order-after-initialization
However, it is still not sorting correctly on the data-order data element. I guess I left out that "renderCell" places an html span tag in the cell before the text, I believe that is why all these are sorted to the top of the list.
I guess I would expect datatables to utilize the data-order attribute instead.
If you are using Ajax sourced data, you actually don't want to use HTML5 data attributes for orthogonal data, as it would just introduce a round trip into the DOM (write / read) which would really slow things down.
Use the
columns.data
options instead. If the data is in the object you can use it as an object. If it needs to be formatted uscolumns.render
.See the orthogonal data section of the manual for more details.
Allan
Allan,
Thanks for the advice. That worked.