How to load data from .csv into data table?
<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>