JQuery Datatables ready event?

Question

Is there an event that fires when a datatable has finished rendering? i.e. when I can begin modifying the HTML output. I am trying to add a row of <select>'s above my column headers, as is shown in the example on http://www.datatables.net/examples/api/multi_filter_select.html

I've not been able to get this to work with my script. My data source is a javascript array as per http://www.datatables.net/examples/data_sources/js_array.html and I've got a feeling that the multi filter select (see link above) doesn't work in conjunction with this.

Basically, I get nothing when iterating over the table headers using the following:

$('table#id thead tr th').each(function() { ... })

I believe it's because the set of elements passed to each is empty but I'm 100% sure the selector is correct and have verified this using FireQuery.

I've found this http://www.datatables.net/examples/advanced_init/events_post_init.html which claims to have information on post-init events but it doesn't seem to be what I want.

Has anyone run into this before and found a solution? Thanks!

Answer 1

fnInitComplete

http://datatables.net/usage/callbacks I tried using this and it renders the select boxes in the footer.

But when I select something in the listbox and use fnFilter I get the error message

Uncaught TypeError: Cannot call method 'replace' of undefined

I tried fnFilter using a button click where I get a message Uncaught TypeError: Cannot read property 'nTr' of undefined

Answer 2

I would use "fnDrawCallback" (see: https://www.datatables.net/usage/callbacks)

$(document).ready( function() {
    $('#example').dataTable( {
        "fnDrawCallback": function( oSettings ) {
            // Your function(s);
        }
    } );
} ); 

I use this callback to bind events to elements that have been created by the datatable.