Tabulator库出现data.indexOf is not a function错误求助

核心错误原因 #

data.indexOf is not a function错误出现在Tabulator的load方法中，说明传入Tabulator的data参数不是数组或字符串类型。Tabulator的data配置项要求接收数组（直接渲染本地数据）或字符串（远程数据URL），但你当前传入的是完整的JavaScript对象，而非符合要求的数组。

结合你提到assObj.get已成功获取数据，大概率是API返回的是嵌套结构（比如常见的{records: [数据数组]}格式），你直接把整个响应对象传给了Tabulator，没提取其中的数组部分。

具体解决步骤 #

1. 确认API返回的数据结构
   在then回调里先打印数据，明确结构：

   .then(dataArray => {
     console.log(dataArray); // 打开浏览器控制台查看数据结构
     let table = new Tabulator("#entree", {
       data: dataArray,
       autoColumns: true
     })
   })
   

   比如如果控制台输出是{records: [{}, {}, ...]}，就需要把data改为dataArray.records。

2. 修正Tabulator的data参数
   根据打印结果，提取数组部分传入：

   // 假设API返回结构是 {records: [数据数组]}
   .then(dataArray => {
     let table = new Tabulator("#entree", {
       data: dataArray.records, // 提取数组传入
       autoColumns: true
     })
   })
   

3. 消除表格初始化警告
   Table Not Initialized警告是因为有代码在表格完成构建前调用了redraw方法，解决方式：

   • 把所有操作表格的代码（比如redraw、更新数据）放在tableBuilt事件回调里：

     let table = new Tabulator("#entree", {
       data: dataArray.records,
       autoColumns: true,
       tableBuilt: function(){
         // 在这里执行需要表格初始化完成后才能调用的操作
       }
     })
     

   • 检查crud.js、data.js等其他文件，看是否有提前调用表格方法的代码，调整到表格初始化完成后再执行。

额外验证点 #

如果assObj.get返回的是未解析的JSON字符串，需要先转换为对象：

.then(rawData => {
  const dataArray = JSON.parse(rawData); // 解析字符串为对象
  let table = new Tabulator("#entree", {
    data: dataArray.records,
    autoColumns: true
  })
})

内容的提问来源于stack exchange，提问作者Frank Harland