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

borsTiHD · April 2018

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 · April 2018

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 · April 2018

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 · April 2018

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables