Q:

jQuery datatables - Index Column print/download issue

I am using a jquery datatables api index column. I've managed to make the table work by following the documentation shown on the page. 
I also used the Buttons plugin to print the table, but in the "index" -- or in my case I named it "Bil" -- column, the numbers are not printed out. 
The same problem occurs when I want to view the data after downloading the table in Excel and PDF. 
The output when I wanted to print the table: 

I don't know if it is a bug or not since I can't find the issue raised else where. I suspect the index value was only loaded to the page but is not inserted into the table. Is there a workaround to maybe use javascript to insert the value inside the table's  ? 
Here is the datatable's javascript that is responsible for the indexing: 
//Datatable
var t = $('#tablePelajarLama').DataTable({
     dom: 'lBfrtip',
     buttons: [
         'copy', 'excel', 'pdf', 'print'
     ],
   "columnDefs": [ {
        "searchable": false,
        "orderable": false,
        "targets": 0
   } ],
   "order": [[ 1, 'asc' ]]
 });

//index counter
t.on( 'order.dt search.dt', function () {
  t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
       cell.innerHTML = i+1;
  } );
} ).draw();

On a side note, I use PHP to load the data into the table if it in any way affects the process. Thanks. 

A:

SOLUTION

You need to use cell().invalidate() API method to tell DataTables to re-read the information from the DOM for the cell holding the index.
t.on( 'order.dt search.dt', function () {
   t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
      cell.innerHTML = i + 1;
      t.cell(cell).invalidate('dom'); 
   } );
} ).draw();

DEMO

See this jsFiddle for code and demonstration.

