title: Edit fields in a table bootstrap-table
body: <p>I'm trying to make the fields in a table to Bootstrap-Table that is editable like this example but I can't do it: <a href="http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html" rel="nofollow">http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/editable.html</a></p>
  
  <p>I'm loading a JSON data, sorts the columns, but I can't do that every field in the table is editable.</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;custom-sort&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="assets/bootstrap/css/bootstrap-table.min.css"&gt;
      &lt;link rel="stylesheet" href="assets/examples.css"&gt;
      &lt;script src="assets/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/bootstrap-table/src/bootstrap-table-custom.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/bootstrap-table/src/bootstrap-table-editable.js"&gt;&lt;/script&gt;
      &lt;script src="ga.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;Custom Sort&lt;/h1&gt;
          &lt;p&gt;Use &lt;code&gt;sorter&lt;/code&gt; column option to define the custom sort of bootstrap table.&lt;/p&gt;
          &lt;table id="table" class="table table-bordered table-striped" data-editable="true" data-toggle="table" data-url="json/data1.json" data-pagination="true"&gt;&lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$('#table').bootstrapTable({
      url: 'json/data1.json',
      columns: [{
          field: 'id',
          title: 'Item ID',
          sortable: 'true',
          editable: 'true'
      }, {
          field: 'name',
          title: 'Item Name',
          sortable: 'true',
          editable: 'true'
      }, {
          field: 'price',
          title: 'Item Price',
          sortable: 'true',
          editable: 'true'
      }, ]
  });
  
  var $table = $('#table');
  
  $(function () {
      $table.on('click-row.bs.table', function (e, row, $element) {
          $('.success').removeClass('success');
          $($element).addClass('success');
      });
  });
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>[{
      "id": 0,
      "name": "Item 0",
      "price": "$0"
  },{
      "id": 1,
      "name": "Item 1",
      "price": "$1"
  },{
      "id": 2,
      "name": "Item 2",
      "price": "$2"
  }]
  </code></pre>
  
  <p>Can you help me to do all table fields editable please.</p>