首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在ajax上成功运行table.setData但未加载数据

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

Stack Overflow用户
提问于 2019-04-16 12:07:32
回答 1查看 510关注 0票数 0

我正在尝试运行一个包含两个制表器表的报告。一个主表,然后单击一行,它将填充一个模式。所有的html部分和jquery (JS)都可以工作。我在ajax调用中有一个成功的函数来设置模式中的数据。但它似乎并没有等待ajax返回数据。请参阅下面的代码。我可以看到console.log中的数据,所以console.log似乎只是在运行,而不是推送到表中。如果我运行一个函数从控制台手动设置数据,它可以工作。所以我不太确定到底是怎么回事。

代码语言:javascript
复制
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监听器上加载数据,它就能完美地工作。下面是bootstrap的代码。

代码语言:javascript
复制
$("#drilldown").on('shown.bs.modal', function (e){
///Ajax call with success handler to load data
})
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55700420

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档