Bootstrap Table With Editable

Example of Bootstrap Table with Editable Extension

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="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://github.com/wenzhixin/bootstrap-table/blob/develop/src/extensions/editable/extension.json"></script>
<script src="//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://getfirebug.com/firebug-lite-debug.js"></script>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
  <button id="addoption" class="btn btn-default">
    Add User
  </button>
     
<table id="table" data-pagination="true" class="table table-striped">

</table>

JavaScript

var data = [{"Contact": 3, "Notes": 'test1'}, {"Contact": 2, "Notes": 'test2'}];
var columns = [{field: 'Contact',
                   title: 'Contact',
                   editable: {
                   type: 'select',
                    source:  function() { return names; }
          				}
                },{field: 'Notes',
                   title: 'Notes',
                   
                }]

var names = [{value: 1, text: 'New'},
             {value: 4, text: 'Andrew'},
             {value: 2, text: 'John'},
             {value: 3, text: 'Liz'}]  
             
$(function () {
    $('#table').bootstrapTable({
    		columns: columns,
        data: data
    });
});
        
 $('#addoption').click(function () {
 				names.push({value: 5, text: 'Bob'}) 
    		$('#table').bootstrapTable('OnRefresh', {});
    });