Несколько DataTables на одной странице с различными источниками AJAX

Question

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

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

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

Спасибо!

РЕДАКТИРОВАТЬ:

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

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

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

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

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

Answer 1

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

  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
             }
        });

Answer 2

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

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

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

Answer 3

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

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

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

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

Answer 4

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

$(".dataTable")

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

$("#dataTable1")

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