All geek questions in one place

How to load data from CSV into data table?

I am trying to use this table to display a table containing data loaded from a CSV file.

Is there a way to load data from .csv into this table with the ability to apply conditional formatting?

Thank!

The following code, until it could, the table body is <tbody>separated from the table.

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="refresh" content="1000">
    <!-- REFRESH EVERY 2 minutes -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://papaparse.com/resources/js/papaparse.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css">
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"></script>
    <style type="text/css">


    </style>
    <title>HTML TABLE FROM .CSV DATA SOURCE</title>
  </head>

  <body>
    <script>


   //Setting data.csv as data source to be loaded into table id="example"
      $(function() {
        Papa.parse("data.csv", {
          download: true,
          complete: function(example) {
            console.log("Remote file parsed!", example.data);
            $.each(example.data, function(i, el) {
              var row = $("<tr/>");
              row.append($("<td/>").text(i));
              $.each(el, function(j, cell) {
                if (cell !== "")
                  row.append($("<td/>").text(cell));
              });
              $("#example tbody").append(row);
            });
          }
        });
      });

</script>
<script type='text/javascript'>
  //Conditionally formating. Where North office are red and South office are green 
  //<![CDATA[
  $(window).load(function() {
    $('#example').dataTable({
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        switch (aData[0]) {
          case 'North':
            $(nRow).css('color', 'red')
            break;
          case 'South':
            $(nRow).css('color', 'green')
            break;
        }
      }
    });
  }); //]]>

</script>


<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
    </table>
  </body>

</html>
+4
source share
1 answer

- .csv [[]] ( , ), , . data , datatables, .

bruteforce fiddle:

var csv="1,2,3\n4,5,6"

function csvToArray(csv){

    return csv.split('\n').map(function(x){
        return x.split(',');
 })
};

console.log(csvToArray(csv));

.

0

Source: https://habr.com/ru/post/1653887/

More articles:


All Articles