Number or date with html formatting and text

AndyD273

Here's my sample:
http://live.datatables.net/bugozibo

Our designer came up with a table design that he wants me to make functional.
It doesn't like the date and number cells though because they contain html and text.

When I tried columns.type to specify type: date or type: html-num it wouldn't sort at all.

Is there a way to tell it which part of the cell to use for the sorting?
Something like:

{ sortOn: node.childNodes[0].childNodes[0].innerHTML }

The other idea I had was to use "orderCellsTop": true and have two rows; top row for the number/date, and bottom row for the text, but I don't know if this is the best way to do it, or if there's something built in that I'm missing.

jr42.gordon

Unless I am missing something, your sample looks to sort properly.

So you can look into the column render function: https://datatables.net/reference/option/columns.render

Also, using (https://datatables.net/reference/option/columns.type) you can provide your own custom data type. Then add your own order function using the following code:

$.fn.dataTable.ext.type.order['single-input-pre'] = function ( a ) {
       // This is for columns that contain a single HTML <input> that need to utilize padLeft
       // used for inputs with numbers
       return $(a).val().padLeft($(a).attr('maxlength'));
};

AndyD273

If you click on Likes it sorts them 18, 1, 25, 3. Replies is ordered 3, 20, 123, 108.

The columns.type page doesn't have any info for how to do custom data types... Reading up on plug-ins right now.

columns.render looks promising, but will it work with pre made tables, or do I need to format everything as an array/json data source?
That is something I can do easily enough, I just want to make sure I understand the requirements.

AndyD273

I added in two new custom types as described on the plug-in page:
https://datatables.net/plug-ins/sorting/

But they don't seem to be working right. I updated my example page above to include the custom data types.

Debug code: http://debug.datatables.net/ocukur

jr42.gordon

You need to append '-pre' to both

$.fn.dataTable.ext.type.order['html-date']
$.fn.dataTable.ext.type.order['html-num-part']

becomes

$.fn.dataTable.ext.type.order['html-date-pre']
$.fn.dataTable.ext.type.order['html-num-part-pre']

jr42.gordon

Also, does the column <th> name need to be in each child <td>?

jr42.gordon

Got it to work, replace with following

$.fn.dataTable.ext.type.order['html-date-pre'] = function ( d ) {
    var matches = d.match(/(\d+\/\d+\/\d+)/g);
    return matches[0];
};
    
$.fn.dataTable.ext.type.order['html-num-part-pre'] = function ( d ) {
    var matches = d.match(/[>](\d+)/g);
    return parseInt(matches[0].replace(">",""));
};

AndyD273

I ended up making one more small change... I figured out that it was still sorting the date by the month, not the year/month/day.

I changed it to this in order to sort it correctly:

    $.fn.dataTable.ext.type.order['html-date-pre'] = function ( d ) {
        var matches = d.match(/(\d{2})\/(\d{2})\/(\d{4})/);
        return matches[3]+"-"+matches[1]+"-"+matches[2];
    };

Thanks a ton!