Блог

Главная - Вопросы по программированию - Несколько таблиц данных на одной странице с разными источниками ajax

Несколько таблиц данных на одной странице с разными источниками ajax

#jquery #ajax #jquery-plugins #datatables

#jquery #ajax #jquery-плагины #таблицы данных

Вопрос:

У меня есть несколько таблиц на одной странице с использованием таблиц данных. У каждого должен быть свой собственный ‘sAjaxSource’. Кажется, я не могу понять, как именно это сделать. Вот минимальный код, который у меня есть:

          var oTable = $('.datatable').dataTable( {
                "bProcessing": true,
                "sAjaxSource": "/ajax/function",
                "bSort": false,
                "fnDrawCallback": function() {
                       //some click events initilized here
                 }
            });

По сути, это простая настройка. Каждая таблица как класс datatable и уникальный идентификатор. Но не уверен, как изменить AjaxSource на основе конкретной таблицы.

Спасибо!

Редактировать:

Вот что я в итоге сделал:

         $('.datatable').each(function(index){

             $('#' $(this).attr('id')).dataTable( {
                "bProcessing": true,
                "sAjaxSource": $(this).children('caption').html(),
                "bSort": false,
                "fnDrawCallback": function() {
                 }
            });
        });

Внутри таблицы я помещаю тег заголовка, который скрыт css и содержит исходный URL-адрес Ajax. Он перебирает каждый экземпляр и получает URL-адрес.

Похоже, это работает до сих пор!

Ответ №1:

У меня была та же проблема, которую я решил, используя атрибут данных html5 и код инициализации, аналогичный вашему:

 $('.dataTableServer').each(function () {
        var source = $(this).attr("data-source");
        $(this).dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": source
        });
    });

таким образом, вам не нужно создавать идентификатор для каждой таблицы данных

Ответ №2:

Это не сработает? Он использует идентификатор, а не класс, для уникальной идентификации каждой таблицы данных и прикрепляет отдельный источник к каждой таблице на основе идентификатора.

   var oTable = $('#FirstDataTableID').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "/ajax/function",
            "bSort": false,
            "fnDrawCallback": function() {
                   //some click events initilized here
             }
        });

  var oTable = $('#SecondDataTableID').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "/ajax/other_function",
            "bSort": false,
            "fnDrawCallback": function() {
                   //some click events initilized here
             }
        });

Комментарии:

1. Да, возможно, но я не хочу использовать совершенно новую инициализацию для каждой из них, это довольно быстро приведет к беспорядку.

2. Ну, довольно сложно иметь отдельную инициализацию для каждой таблицы данных без отдельной инициализации для каждой таблицы данных, о чем вы просите. Вы можете попробовать использовать одну общую инициализацию на основе класса, а затем отдельные, меньшие инициализации с указанием только атрибута источника, что позволит не повторять общий код.

3. Я только что обновил свой пост решением, которое, похоже, работает, что вы думаете? видите какие-либо проблемы?

4. Мне кажется несколько сложным, но если у вас их много, это может иметь смысл. Однако вместо того, чтобы использовать дополнительный элемент таким образом, я бы прикрепил источник к самому элементу databable либо как пользовательский атрибут, либо через jQuery.data() .

5. Хорошая идея, я попытался использовать jQuery.data() однако, похоже, он не сохраняет значение. Возможно, DataTables удаляет его? Какой другой атрибут, по вашему мнению, был бы уместен?

Ответ №3:

Вам нужно будет выбрать каждую таблицу отдельно и применить к ней соответствующий источник данных Ajax, чтобы получить то, что вам нужно. Прямо сейчас вы выбираете на основе имени класса:

 $(".dataTable")

вероятно, потребуется преобразовать в:

 $("#dataTable1")

Я думаю, это будет утомительно, если у вас много таблиц, но это практически единственный способ сделать то, что вы предлагаете.

Ответ №4:

Вы можете использовать две или более таблиц на одной странице. Я сделал это, и datatables работает довольно хорошо. Datatables хранит данные локально, даже если записи были удалены из него асинхронно. Следовательно, нам нужно четко указывать, что при поиске удаленных записей всегда отображается правильный результат. Поскольку таблицы данных необходимо инициализировать только один раз, нам нужно иметь в виду, что для каждой таблицы данных на одной странице мы должны продолжать инициализировать блоки данных, потому что они хранят локальные записи, поскольку мы этого не хотим, потому что на одной странице мы храним / показываем разные данные.

Итак. Мы должны использовать метод последовательно, поскольку 

 $("#Id_of_Current_DTBL").DataTable().destroy();
$("#Id_of_Other1_DTBL").DataTable().clear();
$("#Id_of_Other2_DTBL").DataTable().clear();

Это решит проблему.