方法1(对普通的 table 设置 data-toggle="table"
即可):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lang="zh"/> <title>select2</title> <script src="js/jquery-3.3.1.js"></script> <link href="css/select2.css" rel="stylesheet" /> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-table.css"> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.js"></script> <script src="js/select2.js"></script> <script type="text/javascript"> </script> </head> <body> <div> <table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item 名称</th> <th>Item 价格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>电脑</td> <td>$1000</td> </tr> <tr> <td>2</td> <td>冰箱</td> <td>$500</td> </tr> </tbody> </table> </div> </body> </html>
2.方法2(javascript):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lang="zh"/> <title>select2</title> <script src="js/jquery-3.3.1.js"></script> <link href="css/select2.css" rel="stylesheet" /> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-table.css"> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.js"></script> <script src="js/select2.js"></script> <script type="text/javascript"> </script> </head> <body> <div> <table id = "demo"> </table> </div> <script type="text/javascript"> $('#demo').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '商品' }, { field: 'price', title: '价格' }], data: [{ id: 1, name: '电脑', price: '$1000' }, { id: 2, name: '冰箱', price: '$500' }] }); </script> </body> </html>
3.远程:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta lang="zh"/> <title>select2</title> <script src="js/jquery-3.3.1.js"></script> <link href="css/select2.css" rel="stylesheet" /> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-table.css"> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.js"></script> <script src="js/select2.js"></script> <script type="text/javascript"> </script> </head> <body> <div> <table data-toggle="table" data-url="data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">商品</th> <th data-field="price">价格</th> </tr> </thead> </table> </div> </body> </html>