Bootstrap Table

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>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/extensions/cookie/bootstrap-table-cookie.js"></script>
<script src="https://rawgit.com/bitcrowd/bootstrap-table/bugfix/filterControl_clear_cookies_and_search/src/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<input type="button" id="button" value="Convert CSV File" />

<table id="table" data-filter-control="true">
    
</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: data,
        columns: [{
          field: 'id',
          title: 'ID',
          sortable: true,
          //visible: true,
          filterControl: 'input',
      },
      {
          field: 'col1',
          title: 'Col1',
          sortable: true,
          visible: true,
          filterControl: 'select',
      },
      ]
      });
    });

    //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
    }
    
    
    var data = [{
    "name": "bootstrap-table",
    "stargazers_count": "526",
    "forks_count": "122",
    "description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
}, {
    "name": "multiple-select",
    "stargazers_count": "288",
    "forks_count": "150",
    "description": "A jQuery plugin to select multiple elements with checkboxes :)"
}, {
    "name": "bootstrap-show-password",
    "stargazers_count": "32",
    "forks_count": "11",
    "description": "Show/hide password plugin for twitter bootstrap."
}, {
    "name": "blog",
    "stargazers_count": "13",
    "forks_count": "4",
    "description": "my blog"
}, {
    "name": "scutech-redmine",
    "stargazers_count": "6",
    "forks_count": "3",
    "description": "Redmine notification tools...