Несколько таблиц данных на странице

Question

У меня есть несколько таблиц данных на страницу в диапазоне от 4 до 8 иш.

Все таблицы имеют разные настройки.Все данные получены через sAjaxSource (массив javascript).

Мой вопрос сводится к:

Решение 1) Должен ли я иметь один отдельный URL для каждой таблицы?Кажется, это работает, но означает, что полная загрузка страницы занимает намного больше времени.

Решение 2) Иметь одну и ту же ссылку для всех таблиц (и иметь отдельное имя массива), поэтому его только1 загрузка.

У меня следующие вопросы: Существует ли какое-либо рекомендуемое решение для нескольких таблиц данных на страницу, для получения массивов javascript лучше всего использовать одну или несколько ссылок.

Если вы предоставляете одну и ту же ссылку 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.например, а затем инициализировать DataTables массивом javascript :

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

Надеюсь, это поможет:)