Button on row to display a modal form for that row's data

I'm using wenzhixin's Bootstrap Table jQuery plugin found here to implement a data grid and I am new to jQuery and Javascript. I've been learning but I can't figure this out. I currently have the data displaying in a table with no problem at all. I have a button being displayed at the end of each row and when I click it, I want a Bootstrap modal to open and somehow pass the data-unique-id to the modal as (for example) the id of the modal.

<div class="container">
    <table id="table"
        class="table" 
        data-search="true"
        data-pagination="true"
        data-mobile-responsive="true"
        data-toggle="table"
        data-url="json/membersData.json"
        data-unique-id="id">
        <thead>
            <tr>
                <th data-field="id" data-index="id">MemberID</th>
                <th data-field="m_fname" data-index="id">FirstName</th>
                <th data-field="operate" data-index="id" data-events="operateEvents" data-formatter="operateFormatter">Actions</th>
            </tr>
        </thead>
    </table>

    <div class="modal fade" id="viewMemberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal table</h4>
                </div>
                <div class="modal-body">
                    <!-- output data here-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

and then my javascript:

function operateFormatter(value, row, index) {
    return [
        '<a class="info btn btn-info btn-sm" data-unique-id="',row.id,'" data-toggle="viewMemberModal" data-target="#viewMemberModal',row.id,'">',
        '<span class="glyphicon glyphicon-eye-open"></span>',
        '</a>'
    ].join('');
}

window.operateEvents = {
    'click .info': function () {
        $('#viewMemberModal').modal('show');
    }
};

How can I do this? Can anyone help me figure this out? Any help is greatly appreciated.

Solution

You can use the event params to get the data what you want, and then write it to the modal:

'click .info': function (e, value, row) {
    // the row param is what you want to display, for example: row.id
    $('#viewMemberModal').modal('show')
        .find('.modal-body').html('<pre>' + 
        JSON.stringify(row, null, 4) + '</pre>')
}

Docs: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

The cell events listener when you use formatter function, take three parameters:

event: the jQuery event.
value: the field value.
row: the row record data.
index: the row index.

Example: http://jsfiddle.net/wenyi/e3nk137y/3484/