how to first initialize datatable in a js file and then set the sAjaxSource in separate html files?

kimsia

Hi there,

i am using one of the themeforests that utilizes datatables.

so in the script.js, the datatables is initialized with

[code]
function initTables() {
$('.datatable').dataTable({
'bLengthChange': true,
'bPaginate': true,
'sPaginationType': 'full_numbers',
'iDisplayLength': 5,
'bInfo': false,
'oLanguage':
{
'sSearch': 'Search all columns:',
'oPaginate':
{
'sNext': '>',
'sLast': '>>',
'sFirst': '<<',
'sPrevious': '<'
}
},
'aoColumns': [
{ "bSortable": false },
null,
null,
null,
null,
null,
null
]
});
}


[/code]

and then somewhere in the same script.js

[code]
$(document).ready(function{
initTables();
});
[/code]

the individual html files all will call the script.js


so at the individual html page which uses the datatables, i need to set the

sAjaxSource differently.

How do I add in the sAjaxSource separately?

allan

Hi kimsia,

So basically the initTables() function is doing a default initialisation of tables on the page and you want to override that? That sounds like a good idea to me since the above function mandates that the table has exactly 7 columns! Any other number of columns will cause an error.

So there are a couple of options - the first is to simply ignore / remove initTables() and call your initialisation yourself - this is the option I would recommend as it provides the most control to you as the developer. All you need to do, for a table you want to initialise is have something like:

[code]
$(document).ready( function () {
$('#myTable').dataTable( { ... } };
} );
[/code]

Then you can specify exactly what you want for each table.

Option 2 is to use DataTables 1.9 with its new ability to set defaults ( http://datatables.net/beta/1.9/examples/advanced_init/defaults.html ) - whereby you can set your required defaults and then use a method such as that above.

Or option 3, modify initTables to take two parameters, the first is the table to target and the second is the options. Such a modification might look like:

[code]
function initTables( selector, options ) {
var init = {
        'bLengthChange': true,
        'bPaginate': true,
        'sPaginationType': 'full_numbers',
        'iDisplayLength': 5,
        'bInfo': false,
        'oLanguage':
        {
            'sSearch': 'Search all columns:',
            'oPaginate':
            {
                'sNext': '>',
                'sLast': '>>',
                'sFirst': '<<',
                'sPrevious': '<'
            }
        },     
        'aoColumns': [
            { "bSortable": false },
            null,
            null,
            null,
            null,
            null,
            null
        ]  
    };

if ( !selector ) {
selector = '.datatable';
}

if ( options ) {
$.extend( true, init, options );
}

    $().dataTable(init);
}
[/code]

Then you could do something like:

[code]
initTables( null, { "sAjaxSource": "myAjaxFile.php" } );
[/code]

or to target a specific table:

[code]
initTables( "#myTable", { "sAjaxSource": "myAjaxFile.php" } );
[/code]

Regards,
Allan

kimsia

thank you. i chose option 1 as I had to search for a solution urgently. the other options are too much work for time being.

allan

Option 1 was the one I would pick as well - I think it is the right thing to do initially :-). Longer term it might be worth looking at the default options for 1.9 if you want to initialise your tables in more or less the same way :-)

Allan

kimsia

Hi Allan, thanks for reply. I sent you a private message about displaying records number. Are you able to respond to that ?

allan

Yup - just getting around to it! Reply sent.

Allan