html part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "GET",
url: "data/data2.json",
dataType: "json",
success: function (msg) {
$("#table").bootstrapTable('load', msg);
},
error: function () {
//alert("Error");
}
});
});
</script>
</head>
<body>
<table data-toggle="table" id="table" data-pagination="true">
<thead>
<tr>
<th data-field="id">编号</th>
<th data-field="name">名称</th>
<th data-field="price">价格</th>
</tr>
</thead>
</table>
</body>
</html>
json part:
[
{
"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"
}
]
Effect preview:
Source code download (I hope everyone can download with 0 points, but the CSDN limit can be downloaded at least 2 points):