Question

我正在尝试使用两个制表符表运行报告。一个主表，然后单击一行将填充一个模式。所有的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"},
  ],
});

解决方案：我发现问题在于必须在模态切换后的后（即可见之后）加载数据。如果我在show event侦听器上加载数据，则可以正常运行。下面是带有引导程序的代码。

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

Answer 1

如果API对于第二个制表器表来说太快了

选中此post 初始化rilldownTable后，使用下面的代码设置数据

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

在成功运行table.setData的ajax上但未加载数据

1 个答案: