Add class to cell when using server-side processing

Tklaversma

Reopening #13619

Question: How to add classes to cells when using server-side processing?

Allan said in January 2013 it is not possible to add a class to individual cells using built in options. But I'm curious if it's possible now?

If still not, can you guys give me a code example of how to do this?

TK

= = = = = = =

Answer to workaround, add:

            createdRow: function(row, data, index) {
                $('td', row).eq(6).addClass('whatever'); // 6 is index of column
            },

neurofunk

For example:

"columns": [
            {
                "class" : "class001",    // or "className" : "class001" - the same result
                "data" :  'name',
            },

            {
                 "data" : "score" 
            },
],

other way:

yourDataTable.on( 'draw', function () { 
    $('tr td:nth-child(6)').each(function (){
          $(this).addClass('class001')
    })
});

But first way is simpler

Tklaversma

I think you misinterpreted my question. Let me rephrase by using my actual problem and data. Here goes:

I load data in to the table using server-side processing. Their is a column thats shows dates in the Dutch way (dd-mm-yyyy). So visually you'll see a dutch date, but when sorting you want to sort on 'yyyymmdd'....so we need to add a data-order attribute to the cell. The thing is, like describe here, you cannot use data-order attributes when dealing with dynamic data, unless you do something like this:

            columnDefs: [
                {
                    targets: 'dataorder',
                    data   : {
                        _: "dataorder.display",
                        sort: "dataorder.@ data-order",  // ignore the space, because this goes wrong with MarkDown
                        type: "dataorder.@ data-order"
                    }
                }
            ],

So I did use this. Next problem....since the data is loaded into the cells after the rows are created AND data-order attributes are added (they will be empty), this solution does not work.

So my actual question is, how to show a Dutch date and still sort on 'yyyymmdd' when using server-side processing?

My first solution was to load the English date into the table and afterwards (createdCell callback) change the date to Dutch style.

            columnDefs: [
                {
                    // Cast English dates to dutch dates (visually only!)
                    targets    : 'date',
                    createdCell: function(td, cellData, rowData, row, col) {
                        $(td).html(Date.parse(cellData).toString('dd-MM-yyyy'));
                    }
                }
            ],

The problem with this is that when an user searches on for example 12-12-2012, no records will be shown since the actual date in the cell is 2012-12-12.

So how to get this last part fixed?

tangerine

What is your data source?

Tklaversma

    // Initialize DataTable
    $(mpcTableSelector).dataTable(
        {
            // Localization
            language: {
                ...
            },

            // Server-side processing?
            processing: true,
            serverSide: true,
            ajax: {
                url : ...,
                type: 'POST'
            },

            // Add icons
            createdRow: function(row, data, index) {
                ...
            },

            // Features
            ordering : true,
            paging   : true,
            searching: true,

            // Settings
            columnDefs: [
                {
                    targets   : 'nosearch',
                    searchable: false
                },
                {
                    targets : 'nosort',
                    sortable: false
                },
                {
                    targets      : 'checkbox',
                    orderDataType: 'dom-checkbox'
                }
            ],

            // Callbacks
            initComplete: function() {
                ...
            },

            // Options
            dom       : '<"top"lfr>t<"bottom"ip>',
            order     : [[$('th.sort').index(), 'asc']],
            pageLength: 10
        }
    );

Tklaversma

I'm still curious to the answer, but I fixed it in Php.

When user requests a sort $_POST['order'][0]['column'], check if the request is for the date column.

If so, sort them on the yyyy-mm-dd way...

            usort(
                $orderedData,
                function ($a, $b) {
                    $dateTimeA = DateTime::createFromFormat('d-m-Y', $a[$col['date']]);
                    $dateTimeB = DateTime::createFromFormat('d-m-Y', $b[$col['date']]);

                    return strcmp($dateTimeA->format('Ymd'), $dateTimeB->format('Ymd'));
                }
            );

I went a little off topic here by posting a Php-solution, but than again, this works..