基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
1：在官网上下载相关的文件之后，步骤下载之后引入：
<!-- 引入的css文件 --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet"> <!-- 引入的js文件 --> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="bootstrap-table/dist/bootstrap-table.min.js"></script> <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
2：开始写代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入的css文件 --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <title></title> </head> <body> <table id="mytable"></table> </body> <!-- 引入的js文件 --> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> <script> $('#mytable').bootstrapTable({ columns: [{ field: 'id', title: '编号名' }, { field: 'name', title: '姓名' }, { field: 'photo', title: '联系方式' }], data: [{ id: 1, name: '王小婷', photo: '1373717324' }, { id: 2, name: '安安', photo: '131313' }] }); </script> </html>
3：效果如下：
另外一种方法：通过url请求本地json格式数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入的css文件 --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <title></title> </head> <body> <table id="mytable"></table> </body> <!-- 引入的js文件 --> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> <script> $('#mytable').bootstrapTable({ url: '1.json', columns: [{ field: 'id', title: '编号' }, { field: 'name', title: '姓名' }, { field: 'photo', title: '联系' }, ] }); </script> </html>
json:
[ { "id":"1", "name":"王小婷", "photo":"1234567" }, { "id":"1", "name":"安安", "photo":"42353473" } ]
表格如下：
