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?
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!