Add editable to bootstrap table

Question

I try to use bootstrap table editable. In my jsp page I have:

<div class="row mystyle" >
  <div class="col-md-10">
   <table id="mytable" class="table table-hover" id="table-pagination"
                       data-url="data.json" 
                       data-toggle="table"
                       data-pagination="true"
                       data-show-pagination-switch="true"
                       data-sort-order="desc" 
                       data-show-export="true" 
                       data-search="true" 
                       data-show-toggle="true"  
                       data-show-refresh="true" 
                       data-show-columns="true"
                       data-page-list="[10, 25, 50, 100, ALL]">

      <thead>
        <tr>
         <th data-field="id" data-align="center">id</th>
         <th data-field="type" data-align="center">type</th>
         <th data-field="quantity" data-align="right" data-sortable="true">cost</th> 
        </tr>
      </thead>
  </table>
</div>            

and my table is shown great. Now I want to add the editable method. I added the <script src="assets/js/bootstrap-table-editable.js"></script> and then how ? It isn't clear to me (I am newbie..), how I continue..

Answer 1

You need add the bootstrap-editable.js file, because our extension is based on x-editable like the example: source.

There are other examples maybe can help you: demo1, demo2, demo3, and the docs.

Answer 2

call editable by selecting your table with jquery:

var options = {};
$("#mytable").editable(options);

For the full specs and options list, check here