Get Index Of Selected Row Object In Bootstrap Table

by Greg Esguerra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.0/bootstrap-table.min.js"></script>
<table id="tblDemo" class="table-condensed table-striped">
	<thead>
		<tr>
			<th data-field="id">ID</th>
			<th data-field="name">Name</th>
			<th data-field="price">Price</th>			
		</tr>
	</thead>
</table>

JavaScript

$(function () {
    var $table = $('#tblDemo');
    var mydata = 
    [
        {
            "id": 1,
            "name": "test1",
            "price": "$0.00"
        },
        {
            "id": 2,
            "name": "test2",
            "price": "$385.00"
        },
        {
            "id": 3,
            "name": "test3",
            "price": "$0.00"
        },
        {
            "id": 4,
            "name": "test4",
            "price": "$989.00"
        },
        {
            "id": 5,
            "name": "test5",
			"price": "$2,882.42"
        },
		{
            "id": 6,
            "name": "test6",
			"price": "$300"
        }
    ];

    $('#tblDemo').bootstrapTable({
        data: mydata
    });
	
	$('#tblDemo').on('click-row.bs.table', function (e, row, $element) {
		var index = $element.data('index');
		alert('Row Index is: ' + index.toString());
	});
});