CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
slrom
slrom

Reputation: 144

Bootstrap table data-show-columns="true" loses entered data

I am using a Bootstrap table to display some data. My table includes several drop downs, labels, text boxes, etc. I also included data-show-columns="true" in order to allow the user to show/hide table columns.

I am having a problem with this functionality. If the user enters something in the text box, then uses column filter functionality, the data that is entered in the text box is lost.

Here is a jsfiddle . Could someone please let me know how to fix it, or at least point me in the right direction?

Thank you,

Upvotes: 0

Views: 6236

Answers (2)

James Jithin
James Jithin

Reputation: 10565

You may handle any of the following events as per your requirement and update the table column:

  1. On show/hide of column using column-switch.bs.table and `search.bs.table' (recommended)
  2. On change of value or on blur of the input boxes

Following are the code changes (Fiddle):

Markup

<table id="myDataTable" data-height="299" data-show-columns="true" data-id-field="id" class="table table-hover table-striped" data-toggle="table" data-search="false" data-filter-control="false"
 data-show-multi-sort="false">
    <thead>
    <tr>
        <th data-field="state" data-radio="true"></th>
        <th data-field="name" data-switchable="true">Name</th>
        <th data-field="price">Price</th>
        <th data-field="column1">Columns1</th>
        <th data-field="column2" data-visible="false">Columns2</th>
        <th data-field="column3" data-switchable="false">Columns3</th>
        <th data-field="column4" data-visible="false">Columns4</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td data-field="state"></td>
            <td data-field="name"><input type="text" name="fname" id="fname" class="fname"></td>
            <td data-field="price"><input type="text" name="price" id="price"></td>
            <td data-field="column1"><input type="text" name="1"></td>
            <td data-field="column2"><input type="text" name="2"></td>
            <td data-field="column3">Somehting</td>
            <td data-field="column4">Something</td>
        </tr>

    </tbody>
</table>

JavaScript

$(document).ready(
    function() {
        $('body').on('change', '#fname', function() {
            var nameValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        name: '<input type="text" name="fname" id="fname" value="' + nameValue + '"/>'
                    }
                });
        });

        $('body').on('change', '#price', function() {
            var priceValue = this.value;
            $('#myDataTable').bootstrapTable('updateRow', {
                    index: 0,
                    row: {
                        price: '<input type="text" name="price" id="price" value="' + priceValue + '"/>'
                    }
                });
        });
    }
);

Upvotes: 1

Leo Javier
Leo Javier

Reputation: 1403

The reason why this is happening is because bootstrap is removing the objects from you DOM instead of just hidding the field.

Upvotes: 1

Related Questions