Multiple datatables per page

I have multiple data tables per page, ranging from 4 to 8 ish.

All the tables have different settings. All the data is gotten via sAjaxSource (a javascript array).

My question boils down to:

Solution 1) Should I have one seperate URL for each table? This seems to work, but means a full page load takes a lot longer.

Solution 2) Have one same link for all the tables (and have seperate array name), so its only 1 download.

My questions are as follows: Is there any recommmended solution for multiple data tables per page, that's best practice in terms of 1 or multiple links to get the javascript arrays.

If you provide the same ajax link to multiple datatables the browser seems to download them once per table instead of 1 time for all tables. Is this per "design" or a fault in my code?

Side note: I have checked http://www.datatables.net/examples/basic_init/multiple_tables.html and search the documentation but开发者_运维百科 did not learn anything about the above questions.

In the case you described above, I would not rely on browser cashing, instead I would get data with my own single Ajax request. Store it in a local variable and for different tables use 'aaData' option.

var mydata;
$.ready(function(){
    $.get("source/file.php", function(data){
        mydata = data;
        $('#table1').dataTable({ "aaData": mydata[0] });
        $('#table1').dataTable({ "aaData": mydata[1] });
    }, 'json');

});

but in the end solution depends on your needs, maybe you'll need lots of data, maybe it ll require paging and would be better off with multiple 'source' files with differed loading options etc.

The fact that the browser download the file only the first time when you provide the same link is, I think, due to the browser caching capabilities and has nothing to do with DataTables or your code. The browser put the content in its cache the first time and then serves it from there.

You can use this fact to your advantage by using the sAjaxDataProp option. I'm thinking something along these lines :

$('#table1').dataTable( {
    "sAjaxSource": "sources/data.txt",
    "sAjaxDataProp": "table1"
} );

$('#table2').dataTable( {
    "sAjaxSource": "sources/data.txt",
    "sAjaxDataProp": "table2"
} );

[ ... ]

$('#tableN').dataTable( {
    "sAjaxSource": "sources/data.txt",
    "sAjaxDataProp": "tableN"
} );

This will tell DataTable to look for a specific javascript array in the loaded content. Obviously, the data.txt file must contain the declaration of each table.

If you want to be sure that the browser do only one request, you could also load the data by an other means, a jQuery AJAX function for example, and then initialize the DataTables with an javascript array :

$('#table1').dataTable( { "aaData": array1 } );
$('#table2').dataTable( { "aaData": array2 } );
$('#tableN').dataTable( { "aaData": arrayN } );

I hope this will help :)