Javascript JQuery Datatable Альпака - PullRequest
       11

Javascript JQuery Datatable Альпака

0 голосов
/ 23 ноября 2018

Я попытался просмотреть Интернет, но не столкнулся с подобной проблемой.

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

Страница также содержит другую таблицу, созданную непосредственно с помощью DataTable, в которой показаны ответы, которые пользователь ранее заполнил. Они разделены системой вкладок, поэтому они не отображаются вв то же время.

Проблема заключается в функции поиска в DataTables.Если вы инициализировали таблицу с помощью альпаки (которая также использует таблицы данных под капотом), метод поиска перестает работать должным образом, в результате все время получается 0 результатов.Уничтожение таблицы альпаки также никак не влияет.

Здесь у меня есть четыре простые функции для инициализации таблиц и их уничтожения.Инициализация, уничтожение и повторная инициализация набора данных не влияют на его функциональность поиска, но после создания таблицы альпаки функция поиска останавливается:

let initAlpaca = function () {
    $('#table-alpaca').alpaca(alpacaJson);
};

let destroyAlpaca = function () {
    $('#table-alpaca').alpaca("destroy");
};

let initDataTables = function () {
  if (dataTable == null){
    // datatable.destroy(true) destroys table element.
    $("#div2").append('<table id="table-data" class="table table-bordered table-hover table-striped">');
    dataTable = $('#table-data').DataTable({
        bPaginate: false,
        searchable: true,
        search: {
          smart: false
        },
        columns: [
          {name:"Fname", title:"Fname"},
          {name:"Lname", title:"Lname"},
          {name:"Age", title:"Age"},
          {name:"Check", title:"Check"},
        ],
        data: [
          ["John", "Smith", "44", "2000"],
          ["Mary", "Doe", "54", "2400"],
          ["Markus", "Example", "30", "3000"]
        ]
    });
  }
};

let destroyDataTables = function () {
    if (dataTable != null){
    dataTable.destroy(true);
    dataTable = null;
  }
};

Вот JSFiddle, который может продемонстрировать проблему: JSFiddle

Может ли это быть проблемой только при использовании метода альпака ("уничтожить")?Как правильно удалить возможный экземпляр типа данных альпаки, чтобы обеспечить правильную работу функции поиска другого типа данных?

В отличие от JSFiddle, нет необходимости показывать эти таблицы одновременно.

...