Обрабатывать CSV-текст в DOM - JQuery CSV в таблицу

Прямо сейчас я использую javascript, чтобы получить файл csv, расположенный на моем сервере, обработать данные в файле и распечатать результат на веб-странице (в табличном формате).

Вместо того, чтобы получить локальный файл 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 для обработки данных csv в этом div.

К вашему сведению: я использую https://code.google.com/p/jquerycsvtotable/

Я думал об использовании https://github.com/evanplaice/jquery-csv для анализа CSV внутри div, но, похоже, это не сработало.

Любая помощь с благодарностью.

РЕДАКТИРОВАТЬ:

Я использовал пример Mottie's Inline CSV, но он все еще не работает для меня.
Вот мой код:

<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,$13.00
  Aenima,Tool,$12.00
  "10,000 days",Tool,$14.00
  Down In It,Nine Inch Nails,$3.00
  Broken,Nine Inch Nails,$6.00
  Muse,Black Holes and Revelations,$7.00
  Anon,"fake album, with comma", $1.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>

Любые предложения будут ценны! Благодарю.

Источник

1 ответ

Решение

Если вы используете мой форк TableSorter, есть виджет сборки, который поддерживает CSV для таблицы через ajax. Виджет сборки имеет встроенный код CSVToTable, поэтому параметры включают в себя параметры этого плагина.

CSV

Album,Artist,Price ($)
Lateralus,Tool,$13.00
Aenima,Tool,$12.00
"10,000 days",Tool,$14.00
Down In It,Nine Inch Nails,$3.00
Broken,Nine Inch Nails,$6.00
Muse,Black Holes and Revelations,$7.00
Anon,"fake album, with comma", $1.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
      }
    }
  });
});
Источник
Другие вопросы по тегам