Bootstrap Table

by Greg

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<input type="button" id="button" value="Convert CSV File" />

<table id="table" data-search="true" data-filter-control="true" data-filter-show-clear="true" data-strict-search="true" data-pagination="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="col1" data-filter-control="select" data-sortable="true">Col1</th>
      <th data-field="col2" data-filter-control="input" data-sortable="true" data-editable="true">Col2</th>
      <th data-field="col3" data-filter-control="select" data-sortable="true" data-editable="true">Col3</th>
      <th data-field="col4" data-filter-control="select" data-sortable="true" data-editable="true">Col4</th>
      <th data-field="col5" data-filter-control="select" data-sortable="true" data-editable="true">Col5</th>
    </tr>
  </thead>
</table>

<pre id="csv">
id,col1,col2,col3,col4,col5
1,A,A,1,A,1
2,B,A,1,A,2
3,C,B,1,A,3
4,D,B,1,A,4
5,E,C,1,B,1
6,F,C,1,B,2
7,G,D,1,B,3
8,H,D,1,B,4
9,J,E,1,C,1
10,K,E,1,C,2
</pre>

CSS

pre#csv {
  display: none;
}

JavaScript

$(document).ready(function(){
    	var $table = $('#table');
    });

    /* main upload function */
    $('#button').click(function() {
      var json = csvJSON(document.getElementById('csv').innerHTML);
      //      console.log(json);
      $('#table').bootstrapTable({
        data: json
      });
    });

    //var csv is the CSV file with headers
    function csvJSON(csv) {
      var lines = csv.split("\n");
      var result = [];
      var headers = lines[0].split(",");
      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentline = lines[i].split(",");
        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }
        result.push(obj);
      }
      //return result; //JavaScript object
      return result; //JSON
    }