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!

Virat · Accepted Answer · 2011-04-05 21:50:04Z

10

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

answered Apr 5, 2011 at 21:50

Virat

1012 bronze badges

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

1 Comment

nothingisnecessary Over a year ago

I think you want fnDrawCallback instead of fnInitComplete - fnDrawCallback fires after HTML is rendered.

ImaJedi4ever · Accepted Answer · 2014-03-25 20:58:36Z

10

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.

answered Mar 25, 2014 at 20:58

ImaJedi4ever

3,3611 gold badge20 silver badges11 bronze badges

Collectives™ on Stack Overflow

JQuery Datatables ready event?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related