Tabulator.js 未在 Laravel 刀片视图中通过 AJAX 加载数据

Question

我正在 Laravel 10 中制作一个测试应用程序，我想使用 Tabulator.js 来显示数据。到目前为止，我没有收到任何错误，但网格显示为空。 我使用的 Tabulator 版本是 5.5.2（撰写本文时的最新版本）。

这是我到目前为止的代码（product.js）：

import { Tabulator, AjaxModule } from 'tabulator-tables'
import '../../node_modules/tabulator-tables/dist/css/tabulator.min.css'

document.addEventListener('DOMContentLoaded', () => {

   var table = new Tabulator("#grid", {
      ajaxURL: "/dashboard/getProducts",
      index: "productId",
      height: "300px",
      placeholder: "No data available",
      layout: "fitDataStretch",
      autoResize: true,
      columns: [
         { title: "", field: "productId", visible: false },
         { title: "", field: "userId", visible: false },
         { title: "Code", field: "productCode", width: 90 },
         { title: "Description", field: "description", width: 450 },
         { title: "Price", field: "price", width: 90 }
      ],
   })

})

--- 我尝试过的事情： ---

我已经尝试过官方网站和SO中给出的示例，但没有成功。 即使是所有 Tabulator 站点示例中最简单的一个，也不会显示任何数据，而且奇怪的是，加载视图后，在浏览器控制台中到目前为止没有完成任何 AJAX 请求的迹象。

var table = new Tabulator("#grid", {
   ajaxURL:"/dashboard/getProducts",
});

但是，我能够以不同的方式获取数据，考虑到他们在这个库中提供的功能，我认为这是不合适的：

   axios.get('/dashboard/getProducts').then(res => {
      var table = new Tabulator("#grid", {
         data: res.data,
         index: "productId",
         height: "300px",
         placeholder: "No data available",
         layout: "fitDataStretch",
         autoResize: true,
         columns: [
            { title: "", field: "productId", visible: false },
            { title: "", field: "userId", visible: false },
            { title: "Code", field: "productCode", width: 90, editor: "input" },
            { title: "Description", field: "description", width: 450, editor: "input" },
            { title: "Price", field: "price", hozAlign: "right", width: 90, editor: true },
            { title: "Active?", field: "active", editor: "list", width: 90, editorParams: { values: { "Y": "Yes", "N": "No" } } },
         ],
      })
   })
   .catch(error => {
      if (error.response) {
         Notify('error', error.response.data)
      }
   })

在某些时候，我认为无法获取数据的问题是缺少 CSRF 令牌，但它是一个 GET 请求，即使我将其包含在标头中，也不会返回任何数据。 我还尝试通过单独调用

table.setData()

方法来编写与数据加载分离的制表器配置，但结果相同。

我还摆脱了列定义并让

autoColumns

自动创建它们，只是为了检查是否有任何错误的行，但结果完全相同：“没有可用数据”。

显然，数据库中有数据，并且以制表符期望的格式返回。我尝试使用绝对和相对 URL，但没有成功。

任何人都可以看到我没看到的东西吗？我的代码有什么问题吗？

编辑：我根据要求添加了刀片视图代码，完整的 JS 代码已在上面更新。

@extends('layouts.app')

@section('content')
   <div class="row justify-content-center">
      <div id="grid" class="col-6"></div>
   </div>
@endsection

@push('js')
   @vite(['resources/js/product.js'])
@endpush

我的控制器：

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\product;

class productController extends Controller
{
   // The model to be managed by this controller.
   private $product;

   public function __construct() {
      // Instantiate the model.
      $this->product = new product();
   }


   public function getProducts() {
      return $this->product->getAllRows();
   }
}

这是模型类中 getAllRows() 调用的方法：

   /**
    * Return all rows from the table.
    * return array
    */
   public function getAllData() {
      $query = "SELECT ".$this->getColumns()." FROM ".$this->table." WHERE deleted <> 'Y';";
      $result = DB::select($query);
      return $result;
   }

该方法正确返回 JSON 数据。已经测试过了。

Answer 1

好吧，今天我终于可以花一点时间来详细研究这个问题和 Tabulator 文档，并找到了问题的解决方案。

对于第一次使用 Tabulator 的人来说，要考虑到要使用模块，仅仅导入它是不够的，还需要通过调用方法 registerModule 来

注册

，所以这是我的最终版本工作代码：

import { Tabulator, AjaxModule, FormatModule, EditModule } from "tabulator-tables"
import '../../node_modules/tabulator-tables/dist/css/tabulator.min.css'

document.addEventListener('DOMContentLoaded', () => {

   Tabulator.registerModule([FormatModule, EditModule, AjaxModule]);

   var table = new Tabulator("#grid", {
      ajaxURL: "/getProducts",
      index: "productId",
      height: "300px",
      placeholder: "No data available",
      layout: "fitDataStretch",
      autoResize: true,
      columns: [
         { title: "", field: "productId", visible: false },
         { title: "", field: "userId", visible: false },
         { title: "Code", field: "productCode", width: 90 },
         { title: "Description", field: "description", width: 450 },
         { title: "Price", field: "price", width: 90 }
      ],
   })
})

现在它按预期工作了。