x-editable plugin compatibility with bootstrap 3 and bootstrap-table

Question

I use bootstrap 3 and bootstrap-table, i tried to use x-editable plugin to make cells editable. When I use 'popup' mode and want to edit a cell, there is shown another empty cell next to the cell. I am not sure if it a bug or not.

jsfiddle

HTML

<table class="table table-striped table-bordered table-hover"  cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
<thead>
<tr>
    <th data-field="name" data-halign="center" data-align="left" data-sortable="true">Name</th>
    <th data-field="stargazers_count" data-halign="center" data-align="left" data-sortable="true">Stars</th>
    <th data-field="forks_count" data-halign="center" data-align="left" data-sortable="true">Forks</th>
    <th data-field="description" data-halign="center" data-align="left" data-sortable="true">Description</th>
</tr>
</thead>

JS

var data = [{name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"},
           {name: 'ala', stargazers_count: 234, forks_count: 234, description: "asdasdas"}]

$('table').bootstrapTable({
    data: data
});

$('table tbody tr td').editable();

Answer 1

You will have to use this bootstrap-table-editable extension: https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

Here is a working example: http://issues.wenzhixin.net.cn/bootstrap-table/

Edit:

See this JSFiddle

Three things:

• Add the bootstrap-table-editable extension to the scripts
• Add the attribute data-editable="true" to each column
• Remove the JavaScript code: $('table tbody tr td').editable(); because it's not needed

Check this page for other extensions: http://bootstrap-table.wenzhixin.net.cn/extensions/