如何将 CSV 文件添加到 Tabulator AJAXURL答案

【问题标题】：How to add CSV File to Tabulator AJAXURL如何将 CSV 文件添加到 Tabulator AJAXURL
【发布时间】：2021-04-09 03:41:09
【问题描述】：

我创建了一个代码，它应该使用制表符显示 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>`;
                    },
                },

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

我是新手，请帮帮我

【问题讨论】：

标签： ajax csv tabulator

【解决方案1】：

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

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

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

如果您想从文件选择器中选择文件，您可以调用表格上的import 函数

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

如果您已经在字符串中包含 csv 格式的数据，则可以将其加载到 data 选项上的表中，如下所示：

//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,
});

【讨论】：