首先要下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table

了解官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

下载好后，需要导入如下文件：

<!--css-->
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/>
<!--js-->
<script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>

html需要定义工具栏和表格

<div id="toolbar"></div><!--工具栏-->
<table id="table"></table><!--表格-->

这次用本地数据，不调用后台数据了：

//模拟数据
var tableData = [{id:1001,name:"小明",age:"15",sex:"男"},{id:1002,name:"小红",age:"13",sex:"女"},{id:1003,name:"小刚",age:"16",sex:"男"},{id:1004,name:"小鹏",age:"14",sex:"男"},{id:1005,name:"小月",age:"16",sex:"女"}
]

然后就是显示的事情啦：

$(document).ready(function () {$('#table').bootstrapTable({data: tableData,            // 数据uniqueId: "id",          locale: "zh-CN",            // 语言toolbar: "#toolbar",        // 工具栏search: true,               // 显示搜索height: document.documentElement.clientHeight,//根据页面高度定义表格高度showColumns: true,          //隐藏列striped: true,              // 是否显示行间隔色showRefresh: false,         // 是否显示刷新按钮clickToSelect: false,       // 是否启用点击选中行showToggle: false,          // 是否显示详细视图和列表视图的切换按钮cardView: false,            // 是否显示详细视图javascript:void(0)sortable: false,            // 是否启用排序sortOrder: "asc",           // 排序方式pagination: true,           // 是否显示分页sidePagination: "client",   // 分页方式：client客户端分页，server服务端分页
        columns: [{ field: 'name', title: '名称', sortable: true, width: 280 },{ field: 'age', title: '年龄', sortable: true, width: 280 },{ field: 'sex', title: '性别', sortable: true, width: 280 },]});
});

页面效果：

完整代码：

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>bootstrap-table</title><!--css--><link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css"/><link rel="stylesheet" type="text/css" href="lib/bootstrap-table-1.12.1/bootstrap-table.min.css"/><!--js--><script src="lib/jquery-3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="lib/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><script src="lib/bootstrap-table-1.12.1/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//模拟数据var tableData = [{id:1001,name:"小明",age:"15",sex:"男"},{id:1002,name:"小红",age:"13",sex:"女"},{id:1003,name:"小刚",age:"16",sex:"男"},{id:1004,name:"小鹏",age:"14",sex:"男"},{id:1005,name:"小月",age:"16",sex:"女"}]$(document).ready(function () {$('#table').bootstrapTable({data: tableData,uniqueId: "id",locale: "zh-CN",            // 语言
                    toolbar: "#toolbar",        // 工具栏
                    search: true,               // 显示搜索
                    height: document.documentElement.clientHeight,//根据页面高度定义表格高度
                    showColumns: true,          //隐藏列
                    striped: true,              // 是否显示行间隔色
                    showRefresh: false,         // 是否显示刷新按钮
                    clickToSelect: false,       // 是否启用点击选中行
                    showToggle: false,          // 是否显示详细视图和列表视图的切换按钮
                    cardView: false,            // 是否显示详细视图javascript:void(0)
                    sortable: false,            // 是否启用排序
                    sortOrder: "asc",           // 排序方式
                    pagination: true,           // 是否显示分页
                    sidePagination: "client",   // 分页方式：client客户端分页，server服务端分页
                    columns: [{ field: 'name', title: '名称', sortable: true, width: 280 },{ field: 'age', title: '年龄', sortable: true, width: 280 },{ field: 'sex', title: '性别', sortable: true, width: 280 },]});});</script></head><body><div id="toolbar"></div><!--工具栏--><table id="table"></table><!--表格--></body>
</html>

View Code

有没有觉得很简单呢，下期更精彩

转载于:https://www.cnblogs.com/combat/p/11101303.html

Bootstrap-Table入门篇相关推荐

bootstrap table入门例子
链接:https://pan.baidu.com/s/1jJ2Y89g 密码:eo7t <!DOCTYPE html> <html> <head><meta ...
bootstrap 黑边框表格样式_设置Bootstrap Table表格样式并隔行变色
设置Bootstrap Table表格样式并隔行变色设置bootstrap-table表格样式可以通过设置classess属性进行设置,官方默认支持黑色主题.隔行变色等样式,你也可以自定义样式把你的 ...
bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
微服务入门篇（二），万字长文带你实操作SpringCloudAlibaba微服务组件
目录 SpringCloudAlibaba介绍简介为什么要学SpringCloudAlibaba 从Spring Cloud netflix 到 Spring Cloud Alibaba 功能组件 ...
Farseer.net轻量级ORM开源框架 V1.x 入门篇：新版本说明
导航目录:Farseer.net轻量级ORM开源框架目录上一篇:没有了下一篇:Farseer.net轻量级ORM开源框架 V1.x 入门篇:数据库配置前言 V1.x版本终于到来了.本次 ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
运动控制器编程_快速入门 | 篇二十一：运动控制器ZHMI组态编程简介一
点击上方"正运动小助手",随时关注新动态! 运动控制器ZHMI组态编程简介一今天我们来学习一下,运动控制器的ZHMI组态编程简介.本文主要从产品概述.控制器连接触摸屏使用.HM ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
hive hql文档_30分钟入门 Hive SQL（HQL 入门篇）
Hive SQL 几乎是每一位互联网分析师的必备技能,相信每一位面试过大厂的童鞋都有被面试官问到 Hive 优化问题的经历.所以掌握扎实的 HQL 基础尤为重要,既能帮分析师在日常工作中"如 ...

Bootstrap-Table入门篇

首先要下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table

Bootstrap-Table入门篇相关推荐

最新文章

热门文章