Sorting currency which is also a link

rotaercz

I'm trying to sort currency which is also a link like, <a>$400.00</a>.

I tried:

'type': 'currency'

It did seem to influence the ordering but the sorting still wasn't correct.

When sorted, it was ordering it like this:

$55.00
$50.00
$9.00
$3.00
$40.00

Based on another example that you helped me with (really appreciate the help ), this is what I currently have:

function (data, type, row, meta) {
    if(type === 'sort') {

    }
}

Not sure how to do this?

allan

Yup - don't set the columns.type option manually. The auto-type detection should be all that is needed. If it isn't auto type detected, then it won't work at all.

That said, I would fully have expected what you show above to work in DataTables out of the box. Here is a working example.

Allan

rotaercz

You're right. It does work out of the box.

I realized the issue I'm having only happens when I add a row to the table and try to sort the column.

So basically I'll do:

table.row.add($tr).draw(false);

and if I try to sort the column, the newly added row doesn't get sorted. Am I missing something?

allan

Not sure - I think I'm probably missing something. Can you give me a link to a test case showing the issue please?

Allan

rotaercz

Oh, I think I figured it out!

It's because after I add a row I have code that allows me to edit a cell. I realized I should edit the cell through dataTables. I was editing it in the html itself.

allan

Yes that might do it. You need to use the API to let DataTables know that the data has changed. Update the data using cell().data(), or use cell().invalidate() if you want DataTables to read your modified HTML.

Allan

rotaercz

Man, that solves it. Thank you!

rotaercz

This is sort of related. I'm hiding particular columns using media queries when the width is narrow and showing all columns when it's wide enough. So basically if it's larger than 800 pixels wide I show all columns and if it's narrower than 800, than I hide a few columns that are less important.

When those columns are set to display: none; I'm getting an error when I run:

cell.data(html).draw();

The error is:

Uncaught TypeError: Cannot read property 'row' of undefined

What's the right way to hide these particular columns when the width is smaller so the update will happen smoothly?

EDIT: I should clarify that I'm using DataTables Child rows functionality to show the hidden column info.