Search code examples
javascriptjquerybootstrap-table

Rows excluding first one are checked by default when data pushed in bootstrap table

When I am populating data in the table using bootstraptable, all rows except first row are getting checked by default.

HTML:

<div class="modal fade" id="tableDivID" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" style="width:95%">
            <div class="modal-content " style="margin-top: 20%;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Caption</h4>
                </div>
                <div class="modal-body min-height-400">
                    <div class="row">
                        <div class="col-sm-12">
                            <div id="tableId" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 </div>

Javascript:

function populateTableData(){
  var data= [];
  for(i=0;i<10;i++){
   var row = {'id': i, 'sectionCode': 'hello', 'headerName': 'header'+i, 'amount': '123,123'};
   data.push(row);
   }

var columns = [
        {field: 'id',checkbox: true},
        {field: 'sectionCode', title:'Section Code',visible: false},
        {field: 'headerName', title:'Header Name'},
        {field: 'amount', title:'Amount',width: '30%', align:'right'}];

$("#tableId").bootstrapTable('destroy');
    $("#tableId").bootstrapTable({
        height: 350,
        checkboxHeader: true,
        columns: columns ,
        data: data
    });
}

Output:

enter image description here

I don't want any rows to be selected when the data loads. (i.e. all rows to be unchecked)

If anyone has experienced this, please tell me how you solved it.

Solution 
  • function populateTableData(){
    var data= [];
    for(i=0;i<10;i++){
        var row = {'checked': false, id: i, 'sectionCode': 'hello', 'headerName': 'header'+i, 'amount': '123,123'};
        data.push(row);
    }
}

var columns = [
    {field: 'id', title: 'ID'},
    {field: 'checked',checkbox: true},
    {field: 'sectionCode', title:'Section Code',visible: false},
    {field: 'headerName', title:'Header Name'},
    {field: 'amount', title:'Amount',width: '30%', align:'right'}
];

    Try putting the id separately from the checkbox, because the first id is 0 it evaluates to false, and the checkbox is not checked, and the rest are checked because the integers (1,2,3...) are evaluating to true.