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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (93)

我正在尝试使用两个制表符表运行报表。一个主表,然后点击一行它将填充一个模态。所有的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事件监听器上加载数据,它可以很好地工作。下面是带bootstrap的代码。

$("#drilldown").on('shown.bs.modal', function (e){
///Ajax call with success handler to load data
})
提问于
用户回答回答于

如果API对于您的第二个制表符表来说太快了

查看此帖子。使用 下面的代码在初始化drilldownTable后设置数据

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

热门问答

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

扫码关注云+社区

领取腾讯云代金券