表格格式表从4.9升级到5.3:表未初始化-正在调用值函数

Question

我使用Tabulator作为MediaWiki小部件，您可以看到源代码。

从4.9升级到5.3后，我收到了这个控制台错误(我现在在wiki中恢复了升级(：

表未初始化-在表初始化之前调用值函数初始化可能导致不一致的行为，请等待调用此函数之前的tableBuilt事件。

我知道这一定是由于表现在是如何异步初始化的，但我不知道如何处理。据我所知，问题似乎出在列格式化程序上。在fetch中创建表可能会使事情变得更复杂，但我需要它来从另一个wiki页面获取langs。

document.addEventListener("DOMContentLoaded", function(){
const multiStringFilter = function customHeaderFilter(headerValue, rowValue, rowData, filterParams) {
// headerValue - the value of the header filter element
// rowValue - the value of the column in this row
// rowData - the data for the row being filtered
// filterParams - params object passed to the headerFilterFuncParams property
// make sure each word passes separately
let passed = true;
headerValue.toLowerCase().split(" ").forEach(function(filterWord) {
let value = rowData[filterParams.column];
if (value === null) value = '';
if (value.toString().toLowerCase().indexOf(filterWord) < 0) {
passed = false;
}
});
return passed;
}
const catName = function categoryName(cellComp, formatterParams, onRendered) {
let value = cellComp.getValue();

return categories[value];
}
const linkify = function functionLinks(cellComp, formatterParams, onRendered) {
let value = cellComp.getValue();
let href = cellComp.getRow()._row.data.href;
return "<a href='" + href + "'>" + value + "</a>";
}
let categories = [];
let functions = [];
const functionContainers = Array.from(document.getElementsByClassName("calc_functions"));
functionContainers.forEach(function(item, index) {categories.push(item.previousElementSibling.querySelector(".mw-headline").innerText)});
functionContainers.forEach(
function(cat, index) {
Array.from(cat.getElementsByTagName("a")).forEach(
function(link) {
functions.push(
{"catID":index,"function":link.innerText,"href":link.getAttribute("href")}
)
}, index)        
}
);
const columns = [
{title:"Link", field:"href", visible:false},
{title:"Function", field:"function", headerFilter:"input", headerFilterFunc: multiStringFilter, headerFilterFuncParams: {column: 'function'}, formatter:linkify, width:200},
{title:"Category", field:"catID", headerFilter:"autocomplete", headerFilterParams:{
values: true,
listItemFormatter:function(value, title){ 
return categories[value];
},
showListOnEmpty: true,
allowEmpty: true,
freetext: true,
}, formatter:catName, width:300},
];
let paginationElement = document.getElementById("calc_functions_tableNav").querySelector("span");
const langsRequest = new Request("/index.php?title=Documentation/Calc_Functions/Tabulator_langs");
fetch(langsRequest).then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${ response.status }`);
}
return response.text();
}).then(function(html) {
// Convert the HTML string into a document object
let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
let locale = mw.config.get("wgPageContentLanguage");
let langs = JSON.parse(doc.getElementById("calc_function_langs").textContent);
let table = new Tabulator("#calc_functions_table", {
data:functions,
columns:columns,
locale:locale,
langs:langs,
layout:"fitDataTable",
pagination:"local",
paginationElement:paginationElement,
paginationSize:10,
paginationSizeSelector:[10, 25, 50, 100, true],
});
}).catch(function(err) {
// There was an error
console.warn("Something went wrong.", err);
});
});

Answer 1

这是通过升级到Tabulator 5.3.4解决的，所以很明显这是一个错误！