Question

我每页有多个data tables，范围从4到8个。

所有表格都有不同的设置。所有数据都是通过sAjaxSource（一个javascript数组）获得的。

我的问题归结为：

解决方案1） 我应该为每个表都有一个单独的URL吗？这似乎有效，但意味着整页加载需要更长的时间。

解决方案2） 所有表都有一个相同的链接（并且具有单独的数组名称），因此只有1个下载。

我的问题如下： 是否有针对每页多个数据表的任何推荐解决方案，这是获得javascript数组的1个或多个链接的最佳实践。

如果您为多个数据表提供相同的ajax链接，浏览器似乎每个表下载一次，而不是所有表都下载1次。这是每个“设计”还是我的代码中的错误？

旁注：我已查看http://www.datatables.net/examples/basic_init/multiple_tables.html并搜索文档但未了解上述问题。

Answer 1

在上面描述的情况下，我不会依赖浏览器兑现，而是使用我自己的单个Ajax请求获取数据。将其存储在局部变量中，对于不同的表，使用“aaData”选项。

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

});

但最终解决方案取决于您的需求，也许您需要大量数据，可能需要分页，最好使用不同加载选项的多个“源”文件等。

Answer 2

由于浏览器缓存功能，浏览器缓存功能与浏览器缓存功能无关，因此浏览器仅在您提供相同链接时第一次下载文件这一事实，与DataTables或您的代码无关。浏览器首次将内容放入其缓存中，然后从那里提供服务。

您可以使用sAjaxDataProp选项将此事实用于您的优势。我正在考虑这些问题：

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

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

[ ... ]

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

这将告诉DataTable在加载的内容中查找特定的javascript数组。显然，data.txt文件必须包含每个表的声明。

如果您想确保浏览器只执行一个请求，您还可以通过其他方式加载数据，例如jQuery AJAX函数，然后使用javascript array初始化DataTable：

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

我希望这会有所帮助：）

每页多个数据表

2 个答案: