How to use data-order on dynamically added rows with three or more columns?

Tklaversma

This discussion started on GitHub, but I think this is a more appropriate place.

I know DataTables doesn't support html-data attributes on dynamically added rows, since DataTables doesn't look for them when added. On the GitHub page DataTables suggested to do the following using columns.render which works fine when having two columns.

        columnDefs: [
            {
                targets: -1,
                data: {
                    _: "1.display",
                    sort: "1.@data-order",
                    type: "1.@data-order"
                }
            }

I guess you know whats coming... This doesn't work when having three or more columns. The working Fiddle with two columns can be found here and the broken one with three columns here. Note: skip the datatables error notifications in order to see the code.

Am I doing something wrong or is it a bug? Hope you guys can help me out.

Regards,
TK

seb33gel

Hello

This one seems work http://jsfiddle.net/4pry7og5/22/

Now I look for how to change the "data-order" attribute after you add the line.

In this example by click on td class='test' changes the value of the attribute but does not affect datatable

http://jsfiddle.net/4pry7og5/27/

can you help me?

Tklaversma

@seb33gel Let me first answer your question of "changing attribute value". In order to change a data attribute, use the following:

$(this).data('order',"999999999");

This will set the data-order attribute to 999999999. More information from can be found here.

Now about the data-order problem, I understand that you changed the target to [1], telling DataTables to check the second column. This will work. But what I want, is telling DataTables to check and listen to all columns for data-order attributes....or even better all data attributes.

EDIT:

I changed your solution a bit by using a class name instead of using a column index. Fiddle can be found here.

EDIT 2:

Besides the fact @seb33gel solution works for the data-order problem on a defined column, could someone explain to me how it works? What is _: 1.display and what does it actual tell DataTables? The same goes for 1.@data-order...how does it work?

        columnDefs: [
            {
                targets: [1],
                data: {
                    _: "1.display",
                    sort: "1.@data-order",
                    type: "1.@data-order"
                }
            }

seb33gel

Thank you for the answer.

Change the value by using .data("order",value) instead of .attr(data-order"",value) has no effect on the datatable's order ?

I think this columndef work with data-search attribute with column 1 and 3

 columnDefs: [
            {
                targets: [1],
                data: {
                    _: "1.display",
                    sort: "1.@data-order",
                    type: "1.@data-order",
                    filter: "1.@data-search"
                }
            },
 {
                targets: [3],
                data: {
                    _: "3.display",
                    sort: "3.@data-order",
                    type: "3.@data-order",
                    filter: "3.@data-search"
                }
            }
]

if you set all the columns then datatable uses attribute data correctly

Tklaversma

To answer my own question with help from @seb33gel, the following fiddle) is a working example.

The 1 (in the example below) is the key where the data-order attribute listens to.

        columnDefs: [
            {
                targets: [1],
                data: {
                    _: "1.display",
                    sort: "1.@data-order",
                    type: "1.@data-order"
                }
            }

So when you change your target to ThisIsMyNewTarget for example, then you should also change your data to the following:

        columnDefs: [
            {
                targets: ThisIsMyNewTarget,
                data: {
                    _: "ThisIsMyNewTarget.display",
                    sort: "ThisIsMyNewTarget.@data-order",
                    type: "ThisIsMyNewTarget.@data-order"
                }
            }

allan

Hi,

Good to hear you have found an answer for this with @seb33gel's input. The key difference is in how DataTables is storing your data when you use a string for the data property rather than an integer - it will create a JSON object. If you use data() to get the data for the table you will be able to see the data structure it builds.

The other option is to give row.add() the HTML / node / jQuery object for the row you want to add. That might be conceptually much easier to understand than the data structure DataTables uses.

Allan