I am doing some post processing in datatable in fnRowCallback. But they are not being called when the table is redrawn. (i.e, when some event like changing the number of displayed rows are called from UI, the table is redrawn)

      $(document).ready(function () {
            var oTable = $('#data').dataTable({
                "bJQueryUI": true,
                "bProcessing": true,
                "bServerSide": true,
                "bSort": false,
                "sAjaxSource": "query.php",
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    null,
                    null,
                    null,
                ],
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    $(nRow).attr("id", aData[4]);
                    return nRow;
                },
               "fnDrawCallback": function( oSettings ) {
                // How do I call fnRowCallback here? 
               // losing post processing because it is not being called after a redraw
                }
    });

I am doing some post processing in datatable in fnRowCallback. But they are not being called when the table is redrawn. (i.e, when some event like changing the number of displayed rows are called from UI, the table is redrawn)

      $(document).ready(function () {
            var oTable = $('#data').dataTable({
                "bJQueryUI": true,
                "bProcessing": true,
                "bServerSide": true,
                "bSort": false,
                "sAjaxSource": "query.php",
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    null,
                    null,
                    null,
                ],
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    $(nRow).attr("id", aData[4]);
                    return nRow;
                },
               "fnDrawCallback": function( oSettings ) {
                // How do I call fnRowCallback here? 
               // losing post processing because it is not being called after a redraw
                }
    });

• javascript
• jquery
• datatables

Share Improve this question Follow asked Feb 25, 2014 at 17:21 NEONEO 2,01188 gold badges3636 silver badges5555 bronze badges 6

• Where is your code that redraws the table? – Justin C Commented Feb 25, 2014 at 17:26
• I don't manually redraw, but the table is redrawn automatically when pagination is used if I am correct. I just want to hook the code I use in rowcallback whenever the table is redrawn. – NEO Commented Feb 25, 2014 at 17:27
• fnRowCallback should be called on each row every redraw, maybe try manually redrawing the table and seeing if fnRowCallback is called. – Justin C Commented Feb 25, 2014 at 17:32
• But how do I manually call redraw if datatable itself calls redraw during pagination or display number of rows change? – NEO Commented Feb 25, 2014 at 17:35
• I meant call oTable.fnDraw() somewhere outside of the callbacks, just to make sure that fnRowCallback gets fired on all redraws, not just the initial draw. – Justin C Commented Feb 25, 2014 at 17:37

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 2

I think your attempt to look up the actual row via jquery in $(nRow) does not work. nRow contains the whole row. You should just is as namespace for the jquery selector (second parameter) to restrict it to this particular row.

Like so:

$("selector",nRow).jqueryaction()

This works for me:

Html:

  <tr>
    <td>a</td>
    <td class="boldmetight">b</td>
  </tr>
  <tr>
    <td class="boldmetight">c</td>
    <td>d</td>
  </tr>.. etc

And the table definition with a rowcallback that bolds every cell with a specific class (just for example):

  var otable = $("#datatable").dataTable({
    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
      $('.boldmetight', nRow).html('<b>' +  $('.boldmetight', nRow).text() + '</b>');
    }
  });

Look at this working Plunker