Initialisation with $(document).ready

ejh

I have been trying to combine different features available in DataTables into a single table. I realize that I also need to add Javascripts and CSS sheets as well.

I would like to combine the following features:
-individual column filtering example (using select menus)
-TableTools button collections
-JQuery DataTable Column Filter - Integration with fixed header plugin for datatables [combination]
-column filter plugin with filter in the external form
-column filtering using date AND number range


The problem that I am having with the initialisation is dealing with [code]$('#example').dataTable( {[/code] in [code]$(document).ready( function () {[/code]

Some features/plugins use [code]$('#example').dataTable( {[/code] and some use [code]var oTable = $('#example').dataTable( {[/code] with a later call or reference to [code]var oTable[/code]

Example code:

Search all Columns
[code] $(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} ); [/code]

Column Filters
[code] var oTable = $('#example').dataTable()
.columnFilter({aoColumns: [ null,
{ type: "select"},
{ type: "text"},
{ type: "text"}
{ type: "select", values: [ 'A', 'B', 'C'] },
]
});
new FixedHeader( oTable, { "bottom": true } );
[/code]


Table Tools:
[code] /*
* Example initialisation
*/
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
} ); [/code]

My question is what do I do when I have multiple features/plugins using [code]var oTable = $('#example').dataTable( {[/code] AND how do I combine the code for [code]$('#example').dataTable( {[/code] and some use [code]var oTable = $('#example').dataTable( {[/code]???

Quite simply, how would I combine the code above?

Thank you in advance.

psharp

Make the var oTable outside of the document.ready function, if you plan to change things after the initialization. Otherwise, you will lose the scope of that var.

i.e.
[code]
var oTable = {};

$(document).ready(function(){
otable = $('example').datatable({
~your init~
});
});
[/code]

ejh

Thanx psharp!

One of the other things that I just realized (which will also be a big help to noobs like me) is that you not only need to add the initialisation code in [code]$(document).ready[/code] but you also need to change the code in the Javascript files too.

ejh

I feel like such an idiot!
Once I moved var oTable outside of the document.ready function, I did not have to change the Javascript.

Doh!

psharp

:) I think that since you are able to learn these things, disproves your conclusion of being an idiot!

But seriously, there are times when the scope of the object is not so important as others. Since most of my usage depends on an external data source, I've gotten used to making a global datatable object for quick access from anywhere in the page.

It's very possible that you can use a majority of the datatables (and other plugins for it) completely without making the global reference.

This is an awesome tool that I'm sure you will grow very fond of.

-Patrick