Why I am not able to populate the json data in bootstrap table

Question

I am using Booststrap table to populate json data.

 <!DOCTYPE html> <html lang="en"> <title> Boostrap Modal Example </title> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <script type="text/javascript"> var data = [ { "id": 0, "name": "test0", "price": "$0" }, { "id": 1, "name": "test1", "price": "$1" }, { "id": 2, "name": "test2", "price": "$2" }, { "id": 3, "name": "test3", "price": "$3" }, { "id": 4, "name": "test4", "price": "$4" }, { "id": 5, "name": "test5", "price": "$5" } ]; $(document).ready(function() { alert("I am ready"); $('#modalTable').on('shown',function() { console.log("I am in bro"); $('#mytable').bootstrapTable({ data: data }); }); }); </script> </head> <body> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modalTable">Show Table</button> <!-- Modal --> <div id="modalTable" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <table id="mytable" data-toggle="table" class="table"> <thead> <tr> <th class="col-xs-1" data-field="id">Id</th> <th class="col-xs-1" data-field="name"> Name</th> <th class="col-xs-2" data-field="price">Price</th> </tr> </thead> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body> </html>

I tried this also, but it dint work.

 $(document).ready(function () { alert("I am ready"); $('#modalTable').on('shown', function () { console.log("I am in bro"); $('#mytable').bootstrapTable({ columns: [{ field: 'id', title: 'Id' }, { field: 'name', title: 'Name' }, { field: 'price', title: 'Price' } ], data: [{ id: 1, name: 'Item 1', price: '$1' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }, { id: 2, name: 'Item 2', price: '$2' }] }); }); });

This is the out put I am getting after clicking on the button modal popup pops up. but without data,

But it would be better If i can do it in first way.

I dont know where I am lacking. When I dont use modal. table works fine but as I include modal. it doesnt work. Please help

Answer 1

DEMO

The problem was with 3 things:

I don't see the link to bootstraptable.css and bootstraptable.js in your html .

Bootstrap Modal event on open should be shown.bs.modal instead of just shown . So it would be $('#modalTable').on('shown.bs.modal',function() instead of $('#modalTable').on('shown',function()

Remove data-toggle from your table . It is not required there.

So below is the updated JS and HTML

JS

$('#modalTable').on('shown.bs.modal',function()
{
    console.log("I am in bro");
    $('#mytable').bootstrapTable({
        data: data
    });
});

HTML

<table id="mytable" class="table">
    <thead>
        <tr>
            <th class="col-xs-1" data-field="id">Id</th>
            <th class="col-xs-1" data-field="name"> Name</th>
            <th class="col-xs-2" data-field="price">Price</th>
        </tr>
     </thead>
</table>

Why I am not able to populate the json data in bootstrap table

Question

1 answers

solution1
1 ACCPTED 2015-10-12 05:28:21

Why I am not able to populate the json data in bootstrap table

Question

1 answers

solution1 1 ACCPTED 2015-10-12 05:28:21

solution1
1 ACCPTED 2015-10-12 05:28:21