我正在尝试运行一个包含两个制表器表的报告。一个主表,然后单击一行,它将填充一个模式。所有的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监听器上加载数据,它就能完美地工作。下面是bootstrap的代码。
$("#drilldown").on('shown.bs.modal', function (e){
///Ajax call with success handler to load data
})
发布于 2019-04-17 00:29:22
如果API对于第二个制表器表来说太快
选中以下代码中的post .Use以在drilldownTable初始化后设置数据
if ($("#drilldownTable").hasClass("tabulator")){
//element has class of .tabulator
}
https://stackoverflow.com/questions/55700420
复制相似问题