title: How to load data from .csv into data table?
body: <p>I am trying to use <a href="http://jsfiddle.net/arunpjohny/p88MP/1/" rel="nofollow">this table</a> to display table that contains data that are loaded from a .csv file.</p>
  
  <p>Is there a way to load data from .csv into   <a href="http://jsfiddle.net/arunpjohny/p88MP/1/" rel="nofollow">this table</a> with the capability of applying conditional formatting ?</p>
  
  <p>Thanks!</p>
  
  <p>The following code is as far as iv could up to now, the table body <code>&lt;tbody&gt;</code> is separated from the table.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;meta http-equiv="refresh" content="1000"&gt;
      &lt;!-- REFRESH EVERY 2 minutes --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"&gt;
      &lt;script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://papaparse.com/resources/js/papaparse.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css"&gt;
      &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
  
  
      &lt;/style&gt;
      &lt;title&gt;HTML TABLE FROM .CSV DATA SOURCE&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;script&gt;
  
  
     //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 = $("&lt;tr/&gt;");
                row.append($("&lt;td/&gt;").text(i));
                $.each(el, function(j, cell) {
                  if (cell !== "")
                    row.append($("&lt;td/&gt;").text(cell));
                });
                $("#example tbody").append(row);
              });
            }
          });
        });
  
  &lt;/script&gt;
  &lt;script type='text/javascript'&gt;
    //Conditionally formating. Where North office are red and South office are green 
    //&lt;![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;
          }
        }
      });
    }); //]]&gt;
  
  &lt;/script&gt;
  
  
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Position&lt;/th&gt;
        &lt;th&gt;Office&lt;/th&gt;
        &lt;th&gt;Extn.&lt;/th&gt;
        &lt;th&gt;Start date&lt;/th&gt;
        &lt;th&gt;Salary&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>