Sorting currency which is also a link

Sorting currency which is also a link

rotaerczrotaercz Posts: 31Questions: 7Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • rotaerczrotaercz Posts: 31Questions: 7Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • rotaerczrotaercz Posts: 31Questions: 7Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • rotaerczrotaercz Posts: 31Questions: 7Answers: 0

    Man, that solves it. Thank you!

  • rotaerczrotaercz Posts: 31Questions: 7Answers: 0
    edited July 2018

    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.

This discussion has been closed.