BootstrapTable的简单使用教程
1.引入必须的几个包
<link th:href="bootstrap/css/bootstrap.css}"/>
<link th:href="bootstrap-table/bootstrap-table.css}" />
<script th:src="jquery/jquery.min.js}"></script>
<script th:src="bootstrap/js/bootstrap.js}"></script>
<script th:src="bootstrap-table/bootstrap-table.js}"></script>
<script th:src="bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
2.定义一个table
<table id="main"></table>
3.写js代码
<script type="text/javascript">
init();
function init(){ $('#example').bootstrapTable({
url: '/init/table',
method: 'get',
striped: true,
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
search:true,
showColumns: true,
showRefresh: true,
columns: [
{
//field: 'Number',//可不加
title: '序号',//标题 可不加
align: "center",
width: 40,
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'id',
title: 'id'
},
{
field: 'firstName',
title: 'firstName'
},
{
field: 'lastName',
title: 'lastName'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
}); }
</script>
4.后台数据List 结构的数据
@GetMapping("/table")
@ResponseBody
public List<Person> table() {
Person person = new Person(1, "person", "demo1");
Person person1 = new Person(2, "person1", "demo1");
Person person2 = new Person(3, "person2", "demo1");
Person person3 = new Person(4, "person3", "demo1");
Person person4 = new Person(5, "person4", "demo1");
Person person5 = new Person(6, "test1", "demo1");
Person person6 = new Person(7, "test1", "demo1");
Person person7 = new Person(8, "test1", "demo1");
Person person8 = new Person(9, "test1", "demo1");
Person person9 = new Person(10, "test1", "demo1");
Person person10 = new Person(11, "test1", "demo1");
Person person11 = new Person(12, "test1", "demo1");
Person person12 = new Person(13, "test1", "demo1");
Person person13 = new Person(14, "test1", "demo1");
List list = new ArrayList();
list.add(person);
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
list.add(person5);
list.add(person6);
list.add(person7);
list.add(person8);
list.add(person9);
list.add(person10);
list.add(person11);
list.add(person12);
list.add(person13);
return list;
}
5.视图
完整代码：
html、js、controller
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link th:href="/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet"/>
<link th:href="/bootstrap/css/layoutit.css" rel="stylesheet"/>
<link th:href="/bootstrap-table/bootstrap-table.css" rel="stylesheet"/> </head>
<body>
<div style="text-align: center"><h2>table</h2></div> <table id="example" border="1">
</table> <!-- 全局js -->
<script th:src="/jquery/jquery.min.js"></script>
<script th:src="/bootstrap/js/bootstrap.js"></script>
<script th:src="/bootstrap-table/bootstrap-table.js"></script>
<script th:src="/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript">
init();
function init(){ $('#example').bootstrapTable({
url: '/init/table',
method: 'get',
striped: true,
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
search:true,
showColumns: true,
showRefresh: true,
columns: [
{
//field: 'Number',//可不加
title: '序号',//标题 可不加
align: "center",
width: 40,
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'id',
title: 'id'
},
{
field: 'firstName',
title: 'firstName'
},
{
field: 'lastName',
title: 'lastName'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
}); }
</script>
</body>
</html>
@Controller
@RequestMapping("/init")
public class IndexController { @GetMapping("/index")
public String index(ModelMap mmap) { List list = new ArrayList<>();
Map map1 = new HashMap<>();
map1.put("types", "帽子");
map1.put("totals", 14);
list.add(map1); Map map2 = new HashMap<>();
map2.put("types", "短裤");
map2.put("totals", 20);
list.add(map2); Map map3 = new HashMap<>();
map3.put("types", "短袖");
map3.put("totals", 28);
list.add(map3); mmap.put("list", list);
System.out.println(list);
return "/index";
} @RequestMapping(value = "/getVal", method = RequestMethod.GET)
@ResponseBody
public IndexData getVal(@RequestParam String parameter) {
IndexData indexData = new IndexData();
indexData.setMes(String.format("传入数据:%s,测试时间:%s", parameter, new Date()));
return indexData;
} @RequestMapping(value = "/input", method = RequestMethod.POST)
@ResponseBody
public Person input(@RequestParam("firstname") String firstname, @RequestParam("lastname") String lastname) {
System.out.println(" 姓: " + lastname + " 名字: " + firstname);
Person person = new Person();
person.setFirstName(firstname);
person.setLastName(lastname); return person;
} @RequestMapping(value = "/getAll", method = RequestMethod.GET)
@ResponseBody
public List getAll() {
List<Person> list = new ArrayList<Person>();
Person person1 = new Person("飞", "李");
Person person2 = new Person("娜娜", "刘");
Person person3 = new Person("大强", "苏");
Person person4 = new Person("鸭梨", "大");
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
return list;
} @GetMapping("/first")
public String first(ModelMap mmap) {
return "/first";
} @GetMapping("/table")
@ResponseBody
public List<Person> table() {
Person person = new Person(1, "person", "demo1");
Person person1 = new Person(2, "person1", "demo1");
Person person2 = new Person(3, "person2", "demo1");
Person person3 = new Person(4, "person3", "demo1");
Person person4 = new Person(5, "person4", "demo1");
Person person5 = new Person(6, "test1", "demo1");
Person person6 = new Person(7, "test1", "demo1");
Person person7 = new Person(8, "test1", "demo1");
Person person8 = new Person(9, "test1", "demo1");
Person person9 = new Person(10, "test1", "demo1");
Person person10 = new Person(11, "test1", "demo1");
Person person11 = new Person(12, "test1", "demo1");
Person person12 = new Person(13, "test1", "demo1");
Person person13 = new Person(14, "test1", "demo1"); List list = new ArrayList();
list.add(person);
list.add(person1);
list.add(person2);
list.add(person3);
list.add(person4);
list.add(person5);
list.add(person6);
list.add(person7);
list.add(person8);
list.add(person9);
list.add(person10);
list.add(person11);
list.add(person12);
list.add(person13); return list;
} @GetMapping("/tables")
public String tables(ModelMap mmap) {
return "/table";
} }
BootstrapTable的简单使用教程的更多相关文章
- OpenMP的简单使用教程
转自:http://binglispace.com/2015/01/09/openmp-intro/ OpenMP的简单使用教程 今天有幸参加了一个XSEDE OpenMP的workshop讲座,真是 ...
- 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...
- knockout简单实用教程3
在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...
- GitHub这么火，程序员你不学学吗？ 超简单入门教程 【转载】
本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...
- sea.js简单使用教程
sea.js简单使用教程 下载sea.js, 并引入 官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目 ...
- vim简单使用教程【转】
vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...
- 简单脱壳教程笔记(2)---手脱UPX壳（1）
本笔记是针对ximo早期发的脱壳基础视频教程,整理的笔记. ximo早期发的脱壳基础视频教程 下载地址如下: http://down.52pojie.cn/%E5%90%BE%E7%88%B1%E7% ...
- 【git】git简单使用教程
git的简单使用教程: 1.安装git bash客户端 2.打开git bash,cd到需要存储代码的路径下, 执行:git clone -b deploy ssh://git@gitlab.xxxx ...
- Flyway 简单入门教程
原文地址:Flyway 简单入门教程 博客地址:http://www.extlight.com 一.前言 Flyway 是一款开源的数据库版本管理工具,它更倾向于规约优于配置的方式.Flyway 可以 ...
随机推荐
- Ansible17：Playbook之tags
目录 简介 为task打tag 使用tag 执行指定tag的task 排除指定tag的task 查看playbook中的所有tag 打tag的几种方式 ansible内置tag 简介 在大型项目当中, ...
- [转帖]ASML EUV光刻机累计生产450万块晶圆：一台12亿元
ASML EUV光刻机累计生产450万块晶圆:一台12亿元 来源驱动之家 ...网页被我关了 就这样吧. 截至目前,华为麒麟990 5G是唯一应用了EUV极紫外光刻的商用芯片,台积电7nm EUV工艺 ...
- java中的泛型【T】与通配符【?】概念入门
使用泛型的目的是利用Java编译机制,在编译过程中帮我们检测代码中不规范的有可能导致程序错误的代码.例如,我们都知道List容器可以持有任何类型的数据,所以我们可以把String和Integer等类型 ...
- 『快乐链覆盖 树形dp』
快乐链覆盖 Description 给定一棵 n 个点的树,你需要找至多 k 条互不相交的路径,使得它们的长度之和最大 定义两条路径是相交的:当且仅当存在至少一个点,使得这个点在两条路径中都出现 定义 ...
- BAT: 获取时间有空格问题
最近在项目上需要把文件定时备份,用BAT文件来自动生成文件夹名,精确到秒: bat脚本时间设定如下: pushd E:\Test set T=%date:~0,10%-%time:~0,2%%time ...
- Python - Win10系统下Python3.x环境配置
Win10系统下Python3.x环境配置 https://blog.csdn.net/qq_41952474/article/details/82630551
- Form之action提交不刷新不跳转
<div class="file-box"> <form action="/File/fileUpLoad" id="form1&q ...
- Spring @Import注解源码解析
简介 Spring 3.0之前,创建Bean可以通过xml配置文件与扫描特定包下面的类来将类注入到Spring IOC容器内.而在Spring 3.0之后提供了JavaConfig的方式,也就是将IO ...
- ES6 入门系列 （一）ES6的前世今生
要学好javascript , ECMAScript标准比什么都强, ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性. 理解语言的本质后,你已经从沙堆里挑出了珍珠,能经 ...
- 前端H5知识总结
两年大专生活匆匆而过,身边的朋友也都各奔东西,9月份开始实习感觉自己的前端功底有所欠缺,这个暑假除了打工我还有一个半月的学习时间希望自己能够充分利用这段时间.7月3号所学知识在此做以下总结以便自己复习 ...