基于 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"
}
]
表格如下：
下一篇：
表格插件-bootstrap table的分页的实现使用示例
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
