Bootstrap table how to change value using input box in data-formatter

Question

I am using bootstrap table to display my data. I used a data formatter on a column like:

function inputFormatter(value, row){
    return '<input class="form-control data-input" value="' + value + '">';
}

My bootstrap column:

<th data-field="channel_sku" data-align="center" data-formatter="inputFormatter">Channel SKU</th>

Now the data appears as value in an input box for that column like:

Now the problem is when I change the text in the input box the value of that cell doesn't change. i.e When I send data to my backend using ajax, I get the old data. Also the value attribute in input box doesn't change to the new value.

So How Can I change the value of that cell on text input?

Answer 1

I eventually found a workaround too. I catched the event on clicking the table stored the row index and field in a global varible.

Every time a cell is clicked upon, the value of these global vars will change to the new value of that cell.

$('#sku-map-table').bootstrapTable({
    onClickCell: function (field, value, row, $element) {
        $rowIndex = $element.closest('tr').attr('data-index');
        $field = field;
    }
});

Then I catched the input boxes using data-input class and updated that value of cell with the new value.

$(document).on('change', '.data-input', function(event) {
    $new_val = $(this).val();
    $('#sku-map-table').bootstrapTable('updateCell', {index: $rowIndex, field: $field, value: $new_val});
});

Summary is to change the value of input box , one has to click on the respective cell and that's what I used.