html部分:
<!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("错误"); } }); }); </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部分:
[ { "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" } ]
效果预览:
源码下载(我希望大家能够0积分下载,但是CSDN限制至少2分才能下):