BootstrapTable入门Demo

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

BootstrapTable入门Demo相关推荐

Dubbo入门Demo
2019独角兽企业重金招聘Python工程师标准>>> 1.Dubbo简单介绍 Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方 ...
rabbitmq 入门demo
rabbitmq 入门demo http://www.cnblogs.com/jimmy-muyuan/p/5428715.html http://www.cnblogs.com/shanyou/p/ ...
dubbo web工程示例_分布式开发-Zooker+dubbo入门-Demo
作者:知了堂-刘阳 1.什么是SOA架构 SOA 是Service-Oriented Architecture的首字母简称,它是一个面向服务的架构模式(俗称:分布式:面服务的分布式) 为什么互联网项目 ...
服务网关Ocelot 入门Demo系列（01-Ocelot极简单Demo及负载均衡的配置）
服务网关Ocelot 入门Demo系列(01-Ocelot极简单Demo及负载均衡的配置) 原文:服务网关Ocelot 入门Demo系列(01-Ocelot极简单Demo及负载均衡的配置) [前言] ...
分布式事务框架lcn入门demo
文章目录简介实现原理入门demo 简介 LCN分布式事务框架其本身并不创建事务,而是基于对本地事务的协调从而达到事务一致性的效果. LCN5.0.2有3种模式,分别是LCN模式,TCC模式,TX ...
java实现高德地图app,Android 高德地图入门demo，最新高德地图实现方法，附源码及apk...
[实例简介] Android 高德地图入门demo,最新高德地图实现方法,附源码及apk [实例截图] [核心代码] GaoDeDemo ├── GaoDeDemo │ ├── app │ │ ...
Qt网络编程-简易版UDP组播通信入门Demo（5）
Qt网络编程-简易版UDP组播通信入门Demo(5)
Qt网络编程-TcpServer入门Demo（2）
Qt网络编程-TcpServer入门Demo(2)
dubbo入门学习笔记之入门demo(基于普通maven项目)
注:本笔记接dubbo入门学习笔记之环境准备继续记录; (四)开发服务提供者和消费者并让他们在启动时分别向注册中心注册和订阅服务需求:订单服务中初始化订单功能需要调用用户服务的获取用户信息的接口(订 ...

BootstrapTable入门Demo

BootstrapTable入门Demo相关推荐

最新文章

热门文章