Search code examples
javascriptjquerybootstrap-table

Can't fetch selected row in bootstrap table


I have defined the following bootstrap table in my ASP.NET web page:

<table class="display table table-bordered" data-click-to-select="true" 
                    data-pagination="true" data-sortable="true" data-show-refresh="true" data-single-select="true" data-maintain-selected="true"
                    data-show-toggle="true" data-id-field="customer_id" id="customers" name="customers">
                    <thead>
                        <tr>
                            <th data-field="state" data-checkbox="true"></th>
                            <th data-field="Customer_ID" data-sortable="true">Acct. #</th>
                            <th data-field="Company_Name" data-sortable="true">Company</th>
                            <th data-field="Federal_EIN" data-sortable="true">EIN</th>
                            <th data-field="City" data-sortable="true">City</th>
                            <th data-field="State" data-sortable="true">State</th>
                            <th data-field="Creation_Date" data-sortable="true">Added</th>
                        </tr>
                    </thead>
                </table>

And, following sample code on SO, I am trying to use the following jQuery/JavaScript code to fetch and display info from the selected row:

            $('#customers').on('check.bs.table', function (e, row) {
                checkedRows.push({ id: row.id, name: row.name, forks: row.forks });
                console.log(checkedRows);
                $.each(checkedRows, function (index, value) {
                    $(console.log(value.id + " | " + value.name + " | " + value.forks));
                });
            });

            $('#customers').on('uncheck.bs.table', function (e, row) {
                $.each(checkedRows, function (index, value) {
                    if (value.id === row.id) {
                        checkedRows.splice(index, 1);
                    }
                });
                console.log(checkedRows);
            });

The problem is, the console shows the values of the checked row as undefined. What am I doing wrong?


Solution

  • So, I figured out that the issue is, the row object's fields are case-sensitive, based on the fields the table is populated with (although interestingly, the bootstrap table doesn't care if the data-field parameters observe case-sensitivity!). So, once I used the proper case sensitivity in referring to the fields of the row, everything showed up. Thank you everyone for your help!