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

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

borsTiHDborsTiHD Posts: 3Questions: 1Answers: 0

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

Answers

  • borsTiHDborsTiHD Posts: 3Questions: 1Answers: 0
    edited 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);
    
  • colincolin Posts: 5,893Questions: 0Answers: 1,020

    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

  • borsTiHDborsTiHD Posts: 3Questions: 1Answers: 0

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

Sign In or Register to comment.