Having problems getting the number of rows displayed dynamically changed

tundrwd

I'm having problems getting the number of rows (iDisplayLength) dynamically changed. I've tried several methods, but the problem is that all examples use the namespace of the object created. The code I'm working on uses charisma.js, and the table seems to be dynamically created from the CSS present in the PHP - hence no "namespace" or object created by name.

So, I've tried using the table selector (http://datatables.net/reference/api/table()) as follows:

<script type="text/javascript">

    var tables = $('.dataTable').DataTable();

    tables.table( 0 ).dataTable( {
         "iDisplayLength": 50
    } );

    tables.table( 0 ).fnDraw();     
</script>

This is located just prior to the </body> tag. While this code doesn't generate any errors (per Safari debug logs), and using an alert function call here works (removed in the above example), it doesn't seem to do anything in regards to actually changing the number of displayed rows.

The page displays two tables, that's why I'm using the table() function to get the first one present on the page selected.

I've also tried onDocument Load/Ready as well, and nothing seems to work. What am I doing wrong at this point?