处理 DOM 中的 CSV 文本 - JQuery CSV 到 Table

Question

现在我正在使用 javascript 在我的服务器上获取一个 csv 文件，处理文件中的数据，并将结果打印到网页上（以 table 格式）。

我无需获取本地 csv 文件，只需手动直接内联插入 csv 数据进行处理。

这是我的代码：

<script>
  $(function() {
    $.ajaxSetup({ mimeType: "text/plain" });
    $('#CSVTable').CSVToTable('https://www.example.com/files/test.csv',
        {
          loadingImage: 'https://www.example.com/images/loading.gif',
          headers: ['Plan Information', '&nbsp;'],
          startLine: 0,
          separator: ","
        });
  });
</script>

<div id="CSVTable"></div>

有人可以帮我想出一种直接在代码中指定 csv 数据的方法，而不是抓取文件吗？理想情况下，我希望将 CSV 数据放在 div 中 - 然后以某种方式使用 JS 来处理 div.

中的 csv 数据

仅供参考：我正在使用 https://code.google.com/p/jquerycsvtotable/

我也在考虑使用 https://github.com/evanplaice/jquery-csv 来解析 div 中的 CSV，但它似乎不起作用。

非常感谢任何帮助。

编辑：

我已经使用了 Mottie 的 Inline CSV Example，但是它似乎仍然对我不起作用。
这是我的代码：

<html>
<head>
<!-- jQuery -->
<script src="https://www.example.com/tablesorter/dist/js/jquery-1.10.2.min.js"></script>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="https://www.example.com/tablesorter/dist/css/theme.blue.css"> <!-- choose any theme -->
<script src="https://www.example.com/tablesorter/dist/js/jquery.tablesorter.js"></script>

<!-- build table widget -->
<script type="text/javascript" src="https://www.example.com/tablesorter/dist/js/widgets/widget-build-table.js"></script>
</head>
<body>
<!--
 Note: if the csv data contains commas ("10,000 days") wrap it in quotes
-->
<div class="csv" style="display:none;">
  Album,Artist,Price (USD)
  Lateralus,Tool,.00
  Aenima,Tool,.00
  "10,000 days",Tool,.00
  Down In It,Nine Inch Nails,.00
  Broken,Nine Inch Nails,.00
  Muse,Black Holes and Revelations,.00
  Anon,"fake album, with comma", .00
  Album,Artist,Price (USD)
</div>

<div id="csv2Table"></div>

<script>
$(function() {
  $('#csv2Table').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : $('.csv'),
      build_complete  : 'tablesorter-build-complete', // triggered event when build completes

      // *** CSV & array ***
      build_headers   : {
        rows    : 1,   // Number of header rows from the csv
        classes : [],  // Header classes to apply to cells
        text    : [],  // Header cell text
        widths  : ['3%', '27%', '50%', '20%'] // set header cell widths
      },
      build_footers : {
        rows    : 1,   // Number of header rows from the csv
        classes : [],  // Footer classes to apply to cells
        text    : []   // Footer cell text
      },
      build_numbers : {
        addColumn : "#", // include row numbering column?
        sortable  : true // make column sortable?
      },

      // *** CSV options ***
      build_csvStartLine : 0,  // line within the csv to start adding to table
      build_csvSeparator : "," // csv separator
    }
  });
});
</script>
</body>
</html>

如有任何建议，我们将不胜感激！谢谢。

Answer 1

如果您使用我的 fork of tablesorter, there is a build widget which supports CSV to table via ajax. The build widget has the CSVToTable code built-in, so the options 包括该插件的选项。

CSV

Album,Artist,Price ($)
Lateralus,Tool,.00
Aenima,Tool,.00
"10,000 days",Tool,.00
Down In It,Nine Inch Nails,.00
Broken,Nine Inch Nails,.00
Muse,Black Holes and Revelations,.00
Anon,"fake album, with comma", .00
Album,Artist,Price ($)

HTML

<div id="csv2Table"></div>

脚本

$(function() {
  $('#csv2Table').tablesorter({
    theme: 'blue',
    widgets: ['zebra'],
    widgetOptions: {
      // *** build widget core ***
      build_type      : 'csv',
      build_source    : { url: 'assets/csv.txt', dataType: 'text' },
      build_headers   : {
        widths  : ['30%', '50%', '20%'] // set header cell widths
      }
    }
  });
});

处理 DOM 中的 CSV 文本 - JQuery CSV 到 Table

Process CSV text within the DOM - JQuery CSV to Table

javascript

jquery

csv

tablesorter

jquery-csv