Sorting DataTables

SteveScott517

I was following this tutorial and I am still having trouble sorting.

https://datatables.net/forums/discussion/28714/how-to-use-data-order-on-dynamically-added-rows-with-three-or-more-columns

My HTML is here. I am dynamically entering these rows.

... <td class="price" data-original="{{entry[1]}}" data-order="{{entry[1]}}">{{entry[1]}}</td>

I do some calculations and get this value
I change the value here:

$(sellPriceTd).data('order', price2);

where price2 is a floating point number.

My table definition is here:

$('#mainTable').dataTable( {
        stateSave: true,
        "dom":'<<"#filter"f><"#lenght_field"l>r<t>ip>',
        "iDisplayLength": 100,
        "aaSorting": [[ 4, "asc" ]],
        "columnDefs":[
            {"type": "string"},
            {"type": "string"},
            {
                targets:[3],
                data:{
                    _: "3.display",
                    type: "3.@data-order",
                    sort: "3.@data-order"
           }, 
...
                }

Any feedback is appreciated. This is vexing my website.

kthorngren

In general I think you will need to use $(sellPriceTd).attr('data-order', price2); instead of $(sellPriceTd).data('order', price2);. From the jQuery data() method docs:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

DataTables does not know about the changes made directly to the HTML via jQuery. You will need to tell DataTables about the change using the invalidate() method then to redraw the table using draw(). You can use cell().invalidate() or row().invalidate() depending on your selector.

Something like this might work:

$(sellPriceTd).attr('data-order', price2)
$('#mainTable').DataTable().cell( $(sellPriceTd) ).invalidate().draw();

If this doesn't help please put together a test case for help in troubleshooting.

As a side note the default sort is the fifth column ("aaSorting": [[ 4, "asc" ]],) but you are setting the data-order attribute on the forth column. This may be expected, just wanted to point out that the above won't change the table order if a different column is being sorted.

Kevin

SteveScott517

Wow thanks! My tables are sorting now, phew! The invalidation and redraw really helped.

Could you explain the sorting a bit? The way I understand it is aaSorting sets the default sorting, and data:{sort: "<col>.@data-order") tell it to sort by the data-order attribute? I want an initial default sorting, with the option to override by clicking on the column.

kthorngren

The way I understand it is aaSorting sets the default sorting, and data:{sort: "<col>.@data-order") tell it to sort by the data-order attribute? I want an initial default sorting, with the option to override by clicking on the column.

You are correct and you should have the option to sort by clicking on the columns. Do you not?

Doesn't look like you posted your full Datatables config. Do you have ordering or its legacy equivalent bSort set to false?

Kevin