How does one catch the first draw event?

louking

I initialized a table and seem to have missed the first draw event, I think because I have to create the on('draw' after the table is first initialized.

What is the technique required to catch the first draw event?

See http://codepen.io/louking/pen/MKPpwx

var data = []
for (i=1; i<30; i++) {
  data.push ({a:'a'+i, b:'b'+i, c:'c'+i})
}

var table = $('#tbl').DataTable({
  data: data,
  columns: [{ data: 'a' }, 
            { data: 'b', 
             render: function(d,t,r,m) {
               return '<span class="make-red">' + 
                 d + '</span>';
             }
            }, 
            { data: 'c' }],

});

table.on('draw', function () {
  $('.make-red').addClass('red');
})

<table id=tbl>
  <thead>
    <tr>
      <th>col0</th>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

.red {color:red};

allan

You would just listen for the event before you create the table:

var table = $('#tbl')
  .on( 'draw.dt', function () {
    ...
  } )
  .DataTable({
    ...
  } );

DataTables events are just jQuery custom events with the .dt namespace, so you can listen for them any time.

Allan

louking

Hmm, thought I'd tried that in my application, but maybe I had some brace wrong or something.

Seems to work as you suggest in my simple example: http://codepen.io/louking/pen/obQXZE

Note I don't see the link to mark the question "answered", and sorry for the extra copies of this question (still there as of this writing).

allan

Note I don't see the link to mark the question "answered"

Only threads opened with the "Ask a Question" button can be marked with an answer.

and sorry for the extra copies of this question (still there as of this writing).

No problem. I was going through the 40 odd questions from the weekend one at a time. I've got the duplicates now I think.

Allan