Jquery Datatables, change rowcallback after initialisation

Question

I need to get my hands on existing datatable's fnRowCallback setting but everything I try seems to fail.

What have I tried:

1:

var dt = $('#table').dataTable({
            "bRetrieve": true,
            "fnRowCallback" : function (nRow, aData, iDisplayIndex, iDisplayIndexFull)    {
             console.warn("working");
             }
        );

2:

var dt = $('#table').dataTable({"bRetrieve": true});

dt.fnSettings().fnRowCallback = function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        console.warn("working");
    }

No luck, but if I change

var dt = $('#table').dataTable({"bRetrieve": true});
dt.fnSettings().sAjaxSource = "invalid url";

I get an error so that one seems to work. Also if I do fnRowCallback in the original datatable initialisation it works, but that's not what I want.

Maktouch · Accepted Answer · 2012-12-20 14:35:34Z

5

I deleted my old answer since I really didn't understand your post (it was late!)

It seems like you either have to use unofficial API, or destroy the old table and re-init it.

Unofficial API way (might not work in future version), tested; working in dataTable 1.9.2

$("#table").dataTable().fnSettings().aoDrawCallback.push( {
    "fn": function (oSettings) {
        if ( oSettings.aiDisplay.length == 0 ) {
            return;
        }

        var nTrs = $('#table tbody tr');
        var iColspan = nTrs[0].getElementsByTagName('td').length;
        var sLastGroup = "";
        for ( var i=0 ; i<nTrs.length ; i++ ) {

            var iDisplayIndex = oSettings._iDisplayStart + i;
            data = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData;


            // Now you can access things like
            if (data.percentage > 80) {
                // And access the rows like this
                $(nTrs[i]).addClass("highlight-green");
            }

        }
    },
} );

Correct way: Save old settings, destroy, re-init

var oTable = $('#table').dataTable();

var oldoptions = oTable.fnSettings();

var newoptions = $.extend(oldoptions, {
    fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull)    {
     console.warn("working");
    }
})

oTable.fnDestroy();

$('#table').dataTable(newoptions);

reference: http://datatables.net/forums/discussion/2737/addchange-callback-after-initialization-or-else-clone-settings-to-re-build-table/p1

answered Dec 20, 2012 at 14:35

Maktouch

3,24723 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tomi Lammi Over a year ago

Thanks a lot, I'll test this out once I get back to work in 2013 :) Happy holidays

Roy Ling Over a year ago

You may also add "bDestroy": true option in the new init settings instead of calling fnDestroy()

Yan Yang Over a year ago

@RoyLing Why use push instead of = when setting aoDrawCallback using the first way?

Roy Ling Over a year ago

@YanYang if you read the doc of DataTables, aoDrawCallback is actually an array of objects with fn property, ie. callback, that said, it is like listeners for draw event.

Collectives™ on Stack Overflow

Jquery Datatables, change rowcallback after initialisation

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related