Editor conflicting with column.type?

johnblythe

Hey Alan!

I'm having an issue that would seem to be easily resolved yet isn't.

As in my other posts, this is related to a DT that is using Editor as well. After setting up the fields for Editor the DataTable fields are set by looping through the fields object.

The issue is one of column.type. I've built a filters plugin based on column.data().unique().sort(). The discount related filter, though, isn't sorting correctly due to reading the column as a string type.

In the initial DOM load I have PHP outputting a doubleval(), have the column's type option set to num, AND have a definition set in columnDefs using the class targeting.

<td class='discount'><?=doubleval($d->discount);?></td>

var fields = [
    ...
    {
            label: 'Discount',
            name: 'discount',
            type: 'readonly',
            className: 'readonly discount'
     },
    ....
];
// The `fields` array here stores our column objects as seen above, it's what Editor initially reads to init 
for (i =0; i<fields.length;i++) {
        var dtfield = {data: fields[i].name, name: fields[i].name, className: fields[i].className};

        if (fields[i].name == 'discount') {
            dtfield.type = 'num';
        }

$(document.getElementById(id)).DataTable({
        dom: 'T<"toolbar"><"filter-body">rtip',
        columns: dtfields,     // as set above
        columnDefs: [
            {
                targets: 0,
                render: function() {
                    return "<input type='checkbox' name='row-selected' />"
                }
            },
            {
                targets: [0, 1, 2],
                searchable: false,
                orderable: false,
            },
            {
                targets: 'invisible',
                visible: false
            },
            // Make discounts numeric ---- fail!
            {
                targets: "discount",
                type: "num"
            },
            // help us avoid any errors in case of data mishaps
            {
                targets: "_all",
                defaultContent: ""
            },
        ],

Lastly, the logged columns.data().unique().sort() is as follows:

{
0: "0"
1: "15"
2: "4",
$: function(),
...etc
}

I'm not sure what could be complicating this so my only thought is some nuance that is brought in by Editor, any thoughts?

allan

type: "num"

There should be no need for this and DataTables type detection will automatically select that type if it is possible. That it isn't suggests there is something in the column that means that data type won't work - although I don't see what from the above.

Can you link to a test page showing the issue so I can debug it please.

Allan

johnblythe

Yup, I can get something up at some point today for sure. In the meantime, one thing I failed to mention: it's a hidden (via visible:false) column.

johnblythe

Sorry for the delay, Allan.

Got this up for now instead: http://debug.datatables.net/igihol

It's column 19 - Discount. It's saying it's a num type. Dafuq am I doing wrong then? Is it the way I'm grabbing it like so to build the filter:

column.data().unique().sort().each(function(d, j) {
})

Now, I am converting it to a string in the process of storing it to be displayed bc of needing the appended "%". But the sort is being done before that occurs, in the above loop, so it shouldn't matter, right?

Thanks!

allan

Okay - I see. Thanks for the link.

So the data is in a string format, which means that it will be sorted as a string if you use the sort() method (since that uses native Javascript sorting). DataTables uses its own sorting type detection, which is why it should sort your table correctly on that column, but its sorting has no effect on sort().

You would need to convert your strings to numbers first, as you would if you were using Array.prototype.sort().

One option is to pass a sorting function into it which will perform the type conversion for you.

Allan

johnblythe

Allan,

Thanks for the quick response. I'm not sure that I'm understanding why that is, though, when the output in that debug link says it's a num type. My confusion is compounded due to having set type: 'num' and it being being ignored. Or does all of that only concern itself with DataTables innate typing and sorting methods, i.e. it's not the case when I point regular ol' Javascript at it?

johnblythe

Ended up doing this:

var colObj = [];
                // We have to force a numeric type
                if (name == 'discount') {
                    column.data().unique().sort().each(function(d, j) {
                        colObj.push(parseFloat(d));
                    })
                    // Sort it numerically
                    colObj.sort(function(a, b) {
                        return a-b
                    });

                } else {
                    colObj = column.data().unique().sort();
                }
                $.each(colObj, function(d, j) {
                ... do stuff
                }

Not as straightforward as I'd prefer, but oh well! Thanks for the chat-

allan

'm not sure that I'm understanding why that is, though, when the output in that debug link says it's a num type

It is, but that is only relevant to DataTables internal sort. The sort() method does not use that - it uses Array.prototype.sort() (i.e. Javascript's native sort). To be honest, I haven't thought of having it use the internal sort before - it might be useful that...

Allan

johnblythe

Right on. Thanks for the help! And, for the record, you have my vote on allowing the leveraging of your great DT methods to be reused in miscellaneous fashion while working in/around a DT.