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 可以 ...
随机推荐
- SSM基本配置详解
需要查看SSM基本依赖和完整配置文件的到:SSM基本配置及依赖 示例项目:SSMDemo 1 Spring IOC容器配置 1.1 applicationContext.xml 1.1.1 配置数据源 ...
- TCP 协议 精解
http://www.cnblogs.com/sunev/archive/2012/06/23/2559389.html
- windows 2012 IIS 部署 .net core HTTP Error 502.5 - Process Failure 错误解决办法
安装系统补丁: 2012 R2对应>Windows8.1-KB2999226-x64.msu 下载地址: https://www.microsoft.com/zh-CN/download/det ...
- Laravel处理session（会话）的方法详解
在Web应用程序中,有必要识别跨越请求的用户并为每个用户保存数据,为此,像Laravel这样的框架提供了一种称为会话的机制.本篇文章就来为大家介绍关于Laravel处理session(会话)的方法. ...
- Logstash——multiline 插件，匹配多行日志
本文内容 测试数据 字段属性 按多行解析运行时日志 把多行日志解析到字段 参考资料 在处理日志时,除了访问日志外,还要处理运行时日志,该日志大都用程序写的,比如 log4j.运行时日志跟访问日志最大的 ...
- 隐马尔科夫模型(Hidden Markov Models) 系列之四
转自:http://blog.csdn.net/eaglex/article/details/6430389 前向算法(Forward Algorithm) 一.如果计算一个可观察序列的概率? 1 ...
- Solr核心特性【启动机制，配置管理，请求管理】
一.启动机制 Solr作为一个Java Web应用默认运行在Jetty上,使用全局Java属性[solr.solr.home]来定位配置文件的根目录.在启动时,Solr会扫描主目录下包含core.pr ...
- 搜索引擎框架之ElasticSearch基础详解(非原创）
文章大纲 一.搜索引擎框架基础介绍二.ElasticSearch的简介三.ElasticSearch安装(Windows版本)四.ElasticSearch操作客户端工具--Kibana五.ES的常用 ...
- OL8.0静默安装Oracle 19C
首先在edelivery中下载Oracle Linux 8.0 然后就默认安装系统 环境准备工具目前不支持OL8,所以需要手动安装,首先设置内核参数,在/etc/sysctl.conf追加 [root ...
- 【转载】UNICODE与ASCII的区别
原文地址:https://blog.csdn.net/lx697/article/details/5914417 最近的项目涉及到了国际化的问题,由于之前并没有接触到UNICODE编码,因此,在项目期 ...