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 可以 ...
随机推荐
- [转帖]linux基础知识大纲
linux基础知识大纲 https://blog.csdn.net/CSDN___LYY/article/details/80810403 1.Linux操作系统概述Linux操作系统的发展过程.创始 ...
- fastclick作用
fastclick 是具有消除移动端浏览器上的点击事件的 300ms 的延迟的作用. 注意几点 1.PC端无效 2.Android 上的 Chrome 32+ 浏览器,如果在 viewport met ...
- Password file not found:.../jmxremote.password
jmxremote.password 在jdk/jre/lib/management/下,jmxremote.password.template复制,去掉.template后缀 在配置JMX远程访问的 ...
- 关于PHP Fatal error: Invalid handle returned
我在使用thinkphp5使用pdo的方式连接sqlserver的时候出现如此错误 尝试了网上的多种方法 PHP Fatal error: Invalid handle returned 端口写在了 ...
- nginx 配置反向代理，负载均衡实战解析
前言:NGINX的反向代理和负载均衡是网站架构中经常用到的一种高并发,高可用的方案,下面我们直接实战操作,当然理论也是要的. 一.反向代理 过程:反向代理:客户端 一>代理 <一> ...
- Lambda表达式的用法
参考:https://www.cnblogs.com/knowledgesea/p/3163725.html
- 使用xdebug对php做性能分析调优
作为PHP程序员我们或多或少都了解或使用过xdebug.此文章记录安装和配置xdebug,以及如何使用它来分析php程序. 我的机器环境: mac, php 安装 xdebug 推荐使用 pecl 安 ...
- Java内功心法，创建型设计模式包括哪些
1. 单例(Singleton) Intent 确保一个类只有一个实例,并提供该实例的全局访问点. Class Diagram 使用一个私有构造函数.一个私有静态变量以及一个公有静态函数来实现. 私有 ...
- vue知识点小结
vue.js中==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一 ...
- spring data jpa hql动态查询案例
目的:根据入参条件不同,动态组装hql里的where语句. 1. 实现代码 public List<WrapStatis> queryStatisCriteriaBuilder(Strin ...