BootstrapTable入门Demo

最新推荐文章于 2024-05-23 11:57:15 发布

csdnluolei

最新推荐文章于 2024-05-23 11:57:15 发布

阅读量7.8k

点赞数 3

分类专栏：【BootstrapTable】文章标签： bootstrapTable 入门

本文链接：https://blog.csdn.net/csdnluolei/article/details/83510197

版权

【BootstrapTable】专栏收录该内容

15 篇文章 3 订阅

订阅专栏

bootstrapTable是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

别的不多说，直接上代码，相信看完你对bootstrapTable的使用也有了进一步的认识，具体参数细节看官方文档。

bootstrapTable官方文档

bootstrapTable官方例子

全局CSS 样式 · Bootstrap v3 中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap-table-demo</title>
		<!-- 引入bootstrap样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 引入bootstrap-table样式 -->
		<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" />
		
	</head>
	<body>

	<h4>第一种：通过设置远程的 url 如 data-url="data1.json" 来加载数据。</h4>
	<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">序号</th>
            <th data-field="name">名称</th>
            <th data-field="price">价格</th>
        </tr>
    </thead>
	</table>
	
	<h4>第二种：通过 JavaScript 的方式</h4>
	<!--bootstrap-table表格-->
	<table id="data-table"></table>

	
	<!-- jquery -->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	<!-- bootstrap-table -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
	<!-- 引入中文语言包 -->
	<script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script>
	<script type="text/javascript">

		var $table = $('#data-table');

		//第二种：通过 JavaScript 的方式，方法一
		/*$table.bootstrapTable({
		    columns: [{
		        field: 'id',
		        title: 'Item ID'
		    }, {
		        field: 'name',
		        title: 'Item Name'
		    }, {
		        field: 'price',
		        title: 'Item Price'
		    }],
		    data: [{ //数据
		        id: 1,
		        name: 'Item 1',
		        price: '$1'
		    }, {
		        id: 2,
		        name: 'Item 2',
		        price: '$2'
		    }]
		});*/
		
		//第二种：通过 JavaScript 的方式，方法二
		$table.bootstrapTable({
		    url: 'data1.json',
		    columns: [{
		        field: 'id',
		        title: 'Item ID'
		    }, {
		        field: 'name',
		        title: 'Item Name'
		    }, {
		        field: 'price',
		        title: 'Item Price'
		    }, ]
		});
		
	</script>
	
	</body>
</html>

data1.json

[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 1",
"price": "$1"
},
{
"id": 5,
"name": "Item 1",
"price": "$1"
},
{
"id": 6,
"name": "Item 1",
"price": "$1"
},
{
"id": 7,
"name": "Item 1",
"price": "$1"
}
]

运行结果

这个demo很简单，很适合入门，想继续学习的，可看另一篇博客。

bootstrapTable分页（一） https://blog.csdn.net/csdnluolei/article/details/84191926

csdnluolei

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
4
评论
BootstrapTable入门Demo

bootstrapTable是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。别的不多说，直接上代码，相信看完你对bootstrapTable的使用也有了进一步的认识，具体参数细节看官方文档。 bootstrapTable官方文档 bootstrapTable官方例子全局CS...
复制链接

扫一扫

专栏目录