135
rated 0 times
[
136]
[
1]
/ answers: 1 / hits: 103250
/ 8 Years ago, tue, june 14, 2016, 12:00:00
There is way using javascript (http://jsfiddle.net/8svjf80g/1/) to load JSON data into Bootstrap table but same example is not working with me.
Here is the code -
var $table = $('#table');
var mydata =
[
{
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
},
{
id: 6,
name: test6,
price: $6
},
{
id: 7,
name: test7,
price: $7
},
{
id: 8,
name: test8,
price: $8
},
{
id: 9,
name: test9,
price: $9
},
{
id: 10,
name: test10,
price: $10
},
{
id: 11,
name: test11,
price: $11
},
{
id: 12,
name: test12,
price: $12
},
{
id: 13,
name: test13,
price: $13
},
{
id: 14,
name: test14,
price: $14
},
{
id: 15,
name: test15,
price: $15
},
{
id: 16,
name: test16,
price: $16
},
{
id: 17,
name: test17,
price: $17
},
{
id: 18,
name: test18,
price: $18
},
{
id: 19,
name: test19,
price: $19
},
{
id: 20,
name: test20,
price: $20
}
];
$(function () {
$('#table').bootstrapTable({
data: mydata
});
console.log(mydata);
});<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>
<html>
<head>
<title>Table Data Addition</title>
<meta charset=utf-8>
<link rel=stylesheet href=bootstrap.min.css>
<link rel=stylesheet href=bootstrap-table.css>
<script src=jquery.min.js></script>
<script src=bootstrap.min.js></script>
<script src=bootstrap-table.js></script>
</head>
<body>
<div class=container>
<table id=table
data-toggle=table
data-toolbar=#toolbar
data-height=460>
<thead>
<tr>
<th data-field=id>Item ID</th>
<th data-field=name>Item Name</th>
<th data-field=price>Item Price</th>
</tr>
</thead>
</table>
</div>
</body>
</html>Can you guys please help identify what part I am missing.
Here are CSS and JS versions -
- bootstrap.min.css v.3.2
- bootstrap-table.css v.1.8.1
- jquery.min.js v.3.0
- bootstrap.min.js v.3.2
- bootstrap-table.js v.1.10.1.
More From » jquery
