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

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

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

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

спасибо!

EDIT:

вот что я закончил делать:

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

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

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

Это, кажется, работает до сих пор!

8
ajax datatables jquery jquery-plugins

4 ответов

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

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

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

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

таким образом, вам не нужно создавать идентификатор для каждого dataTable

4

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

$(".dataTable")

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

$("#dataTable1")

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

0

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

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

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

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

0