Sorting Suggestion

jrichview

Been a while since I messed with DataTables, but just ran into an issue where a Date/Time was rendering in a column and wrapping was sometimes happening between the time and the AM/PM. Changed the space to an NBSP; and of course that broke sorting.

I see the sorting plugin, but had a suggestion for a much simpler approach: support a data attribute on a TD that gives it the value to use for sorting. If that exists, assume the value within the cell is just a display value. Would be very simple to deal with, no plugin necessary.

allan

If you are using the DataTables stylesheet just add nowrap as a class to your table.

Otherwise simply add the following to your CSS:

table.dataTable th, 
table.dataTable td {
  white-space: nowrap;
}

support a data attribute on a TD that gives it the value to use for sorting

This is already available. Documentation / Example.

Allan

jrichview

Well, that forces no wrapping which isn't what I really needed. My table was getting too wide as it was.

Here are the 3 steps I used to solve it under the current design:

In the initialization "columnDefs":

        $("#tblExample).dataTable({
            "order": [[2, "desc"]],
            "columnDefs": [
                { "orderable": false, "targets": [8] },
                { "className": "rtAlignColumn", "targets": [6, 7] },
                { "className": "ctrAlignColumn", "targets": [0, 1, 2, 3, 4] },
                { "className": "ctrAlignColumn noWrap", "targets": [5] },
                { "render": fixDateWrap, "type":"date", "orderDataType":"htmldate", "targets": [2]}
            ]
        });

Function to force wrapping between date and time (could have been done server side given this is an MVC app):

function fixDateWrap(data, type, row) {
        return data.replace(/\s/, "<br>"); // force wrap at first space
}

Function to deal with sorting a date time that has an html BR tag:

    $.fn.dataTable.ext.order['htmldate'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            var val = $(td).html();
            if (val.indexOf("<br") > 0) {
                val = val.replace("<br>", " ");
            }
            return val;
        });
    }

Obviously I was experimenting so you can optimize the code

allan

Sorry - I misunderstood. I thought you didn't want wrapping. You could use a column specific class if you only want the no wrapping to occur on the time column.

However, the orthogonal data is probably the best way as you suggested.

Allan

jrichview

I do appreciate your time & attention, Allan

jrichview

Note to HTML purists: I did not add the break tag in the customary way "<br /> because it was coming back out as "<br>" anyway.