Merging Cells in Bootstrap Table

Question

I have troubles merging Cells in Bootstrap Table I've found an example here.

But I don't want the merging executed by clicking a button, instead I want to merge automatically.

Here's my code:

<table id='ViewTable'
       data-toggle='table'
       data-url='func/json.php?id=1'
       data-class='table table-hover table-condensed'
       data-striped='true'
       data-show-header='false'>
    <thead>
    <tr>
        <th data-field='picture'></th>
        <th data-field='description'></th>
        <th data-field='value'></th>
    </tr>
    </thead>
    </table>

    <script>
    $(document).ready(function() {
        $('#ViewTable').bootstrapTable('mergeCells', {
                index: 0,
                field: 'picture',
                rowspan: 12
        });
    });
    </script>

Any suggetions?

Answer 1

you can use post-body.bs.table event to do what you want:

var $table = $('#ViewTable');

$(function () {
    $table.on('post-body.bs.table', function () {
        $table.bootstrapTable('mergeCells', {
            index: 0,
            field: 'picture',
            rowspan: 12
        });
    });
});

Here is a jsFiddle example.