After draw(): Change row color based on column data after ajax call

borsTiHD

Hello,

I hope someone could help me.
I create my DataTable without any data.
Then I make an ajax request and fill my DataTable with the returned data.

Is it possible to manipulate this returned data?
I tried a few methods, but everytime I try to change things, I get this error message:

DataTables warning: table id=Example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

My code is something like this, within my ajax call:
[code]DataTable.clear();
DataTable.rows.add(data);
DataTable.draw();

        $("#"+DataTableID).dataTable({
            /*
            "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                $('td', nRow).css('background', aData[1] == "test" ? '#eef' : '#fff');
                return nRow;
            }
            */

            /*
            "createdRow": function( row, data, dataIndex ) {
                if ( data[1] == "test" ) {        
                    $(row).addClass('bg_red');
                }
            }
            */

            "rowCallback": function( row, data, index ) {
                if ( data[1] == "test" )
                {
                    $('td', row).css('background-color', 'Red');
                }
                else
                {
                    $('td', row).css('background-color', 'Orange');
                }
            }
        });[/code]

Everything I commented out didn't work either.

Thanks for helping.

Greetings
borsTiHD

borsTiHD

I tried a few things and I found this: https://stackoverflow.com/questions/13912363/jquery-datatables-change-rowcallback-after-initialisation

It seems to work, but I don't think that's pratical.
Is there a better way for doing this?

            DataTable.clear();
            DataTable.rows.add(data);
            DataTable.draw();


            var oTable = $("#"+DataTableID).dataTable();

            var oldoptions = oTable.fnSettings();

            var newoptions = $.extend(oldoptions, {
                fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull)    {
                    if ( aData[12] == "test" )
                    {
                        $('td', nRow).addClass('bg_red');
                    }
                    else
                    {
                        $('td', nRow).addClass('bg_green');
                    }

                    return nRow;
                }
            })

            oTable.fnDestroy();

            $("#"+DataTableID).dataTable(newoptions);

colin

Hi @borsTiHD ,

This example here demonstrates the rowCallback.

The problem you had, with the error "Cannot reinitialise DataTable" is probably because you really are reinitialising the table with different options.

Hope that helps,

Cheers,

Colin

borsTiHD

Thanks for your help.
I need to try this again. In the first run, I had a few problems.