如何将 CSV 文件添加到 Tabulator AJAXURL

Question

我已经创建了一个代码，它应该使用制表符显示 csv 文件的内容，我根据一些教程视频编写了代码。但仍然没有显示数据。我也没有收到任何错误..任何人都可以帮助我。

import xlsx from "xlsx";
import feather from "feather-icons";
import Tabulator from "tabulator-tables";

(function (cash) {
    "use strict";

    // Tabulator
    if (cash("#tabulator").length) {
        // Setup Tabulator
        let table = new Tabulator("#tabulator", {
            ajaxURL: "C:/Users/Desktop/All Desktop File/GARRS.csv",
            ajaxFiltering: true,
            ajaxSorting: true,
            printAsHtml: true,
            printStyled: true,
            pagination: "remote",
            paginationSize: 10,
            paginationSizeSelector: [10, 20, 30, 40],
            layout: "fitColumns",
            responsiveLayout: "collapse",
            placeholder: "No matching records found",
            columns: [
                {
                    formatter: "responsiveCollapse",
                    width: 40,
                    minWidth: 30,
                    align: "center",
                    resizable: false,
                    headerSort: false,
                },  
                {
                    title: "PRODUCT NAME",
                    minWidth: 200,
                    responsive: 0,
                    field: "name",
                    vertAlign: "middle",
                    print: false,
                    download: false,
                    formatter(cell, formatterParams) {
                        return `<div>
                            <div class="font-medium whitespace-nowrap">${
                                cell.getData().name
                            }</div>
                            <div class="text-gray-600 text-xs whitespace-nowrap">${
                                cell.getData().category
                            }</div>
                        </div>`;
                    },
                },

有没有办法做到这一点。而且我也没有遇到任何错误，所以我不知道真正的问题是什么。

我是新手，请帮助我

Answer 1

你很幸运，在 5.1 版本之前这是不可能的，Tabulator 只能接受 JSON 格式的数据或数组。

Tabulator 5.1 引入了 Import Module，它允许您正在寻找的导入类型。

首先，您似乎试图从 C:\ 上的本地文件加载，该文件在该庄园的浏览器中无法运行，而且无论如何都是不好的做法，因为它在部署到服务器时无法运行。

如果您想从文件选择器中选择文件，您可以调用 table

上的 import 函数

table.import("csv", ".csv");

如果您已经在字符串中拥有 csv 格式的数据，可以将其加载到 data 选项的 table 中，如下所示：

//define some CSV data
var csvData = `"Name", "Location", "Age"
"Oli", "London", "23"
"Jim", "Mancheser", "53"`;

//define table
var table = new Tabulator("#example-table", {
    data:csvData,
    importFormat:"csv",
    autoColumns:true,
});

如何将 CSV 文件添加到 Tabulator AJAXURL

How to add CSV File to Tabulator AJAXURL

ajax

csv

tabulator