при успешном выполнении ajax table.setData, но данные не загружаются - PullRequest
Новая
       15

при успешном выполнении ajax table.setData, но данные не загружаются

0 голосов
/ 16 апреля 2019

Я пытаюсь запустить отчет с двумя таблицами табулятора.Одна основная таблица, затем по щелчку строки она будет заполнена модальной.Вся HTML-часть работает и JQuery (JS) работает.У меня есть функция успеха при вызове ajax для установки данных в модальном режиме.Но он, похоже, не ждет, пока ajax вернет данные.Смотрите код ниже.Я вижу данные в console.log, так что console.log, кажется, работает, просто не нажимая на таблицу.Если я запускаю функцию для установки данных вручную из консоли, это работает.Так что не совсем уверен, что происходит. 

var CatVolumetable = new Tabulator("#myreport", {
//height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  placeholder:"Select Year-Month to populate Data",
  layout:"fitColumns", //fit columns to width of table (optional)
  columns:[ //Define Table Columns
    {title:"Category Name", field:"Category_name", align:"left"},
    {title:"State", field:"State",align:"center"},
    {title:"Max Quantity",field:"maxQuantity", align:"left"},
  ],
  rowClick:function(e, row){ //trigger an alert message when the row is clicked
    var state = row.getData().State;
    //getStoresByState(state);
    $('#drilldown').modal('toggle');

    let myUrl = 'http://localhost:3000/view_state_category_volume_drilldown/'+state;
    $.ajax({
      //$.ajax({
      url:    myUrl,
      method:   'get',
      dataType:   'json',
      success: function(data){
        console.log(data);
        ddtable.setData(data);
      }
    });

var ddtable = new Tabulator("#drilldownTable", {
  //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  //ajaxURL:""
  placeholder:"No Data Available",
  layout:"fitColumns", //fit columns to width of table (optional)
  columns:[ //Define Table Columns
    {title:"Manager_email", field:"Manager_email"},
    {title:"Manager_name", field:"Manager_name", align:"left"},
    {title:"Store_num", field:"Store_num"},
    {title:"Street_address", field:"Street_address", align:"center"},
    {title:"City Name", field:"City_name", align:"center"},
  ],
});

РЕШЕНИЕ: Я понял, что проблема заключается в том, что данные должны быть загружены после модального переключателя (т.е. после того, как он виден).Если я загружаю данные на слушателя события шоу, он работает отлично.Ниже приведен код с начальной загрузкой. 

$("#drilldown").on('shown.bs.modal', function (e){
///Ajax call with success handler to load data
})

1 Ответ

0 голосов
/ 16 апреля 2019

Если API слишком быстрый для вашей второй таблицы табулятора

Проверьте это сообщение .Используйте приведенный ниже код для установки данных после инициализации таблицы детализации 

if ($("#drilldownTable").hasClass("tabulator")){
   //element has class of .tabulator
}
...