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的简单使用教程的更多相关文章

  1. OpenMP的简单使用教程

    转自:http://binglispace.com/2015/01/09/openmp-intro/ OpenMP的简单使用教程 今天有幸参加了一个XSEDE OpenMP的workshop讲座,真是 ...

  2. 程序员，一起玩转GitHub版本控制，超简单入门教程 干货2

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub,进行版本控制.帮助大家摆脱命令行工具,简单快速的使用GitHub. 做全栈攻城狮-写代码也要读书,爱全栈,更爱生活. 更多原创教程请关注 ...

  3. knockout简单实用教程3

    在之前的文章里面介绍了一些KO的基本用法.包括基本的绑定方式,基本的ko的绑定语法包括text绑定,html绑定等等(如有不明请参照上两篇文章),下面呢介绍一下关于ko的其他方面的知识.包括比较特殊绑 ...

  4. GitHub这么火，程序员你不学学吗？ 超简单入门教程 【转载】

    本GitHub教程旨在能够帮助大家快速入门学习使用GitHub. 本文章由做全栈攻城狮-写代码也要读书,爱全栈,更爱生活.原创.如有转载,请注明出处. GitHub是什么? GitHub首先是个分布式 ...

  5. sea.js简单使用教程

    sea.js简单使用教程 下载sea.js, 并引入 官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目 ...

  6. vim简单使用教程【转】

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  7. 简单脱壳教程笔记(2)---手脱UPX壳（1）

    本笔记是针对ximo早期发的脱壳基础视频教程,整理的笔记. ximo早期发的脱壳基础视频教程 下载地址如下: http://down.52pojie.cn/%E5%90%BE%E7%88%B1%E7% ...

  8. 【git】git简单使用教程

    git的简单使用教程: 1.安装git bash客户端 2.打开git bash,cd到需要存储代码的路径下, 执行:git clone -b deploy ssh://git@gitlab.xxxx ...

  9. Flyway 简单入门教程

    原文地址:Flyway 简单入门教程 博客地址:http://www.extlight.com 一.前言 Flyway 是一款开源的数据库版本管理工具,它更倾向于规约优于配置的方式.Flyway 可以 ...

随机推荐

  1. 乘法器——booth编码

    博主最近在学习加法器.乘法器.IEEE的浮点数标准,作为数字IC的基础.当看到booth编码的乘法器时,对booth编码不是很理解,然后在网上找各种理解,终于豁然开朗.现将一个很好的解释分享给大家,希 ...

  2. python 学习之 基础篇二 字符编码

    声明: 博文参考1:字符编码发展历程(ASCII,Unicode,UTF-8) 博文参考2:Python常见字符编码间的转换 (1)为什么要用字符编码 早期的计算机使用的是通电与否的特性的真空管,如果 ...

  3. 【转载】C#的ArrayList使用Contains方法判断是否包含某个元素

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,在ArrayList集合中可以使用Contains方法判断是否包含某个元素数据,如果包含则返回true,否则返回false,Cont ...

  4. JSON.stringify & JSON.parse 简析

    以前用到JSON的场景也不少,但是没有仔细的研究过,这几天趁着一个需求用到了,就整理了一下相关用法. 一. JSON.stringify() 1. 语法  JSON.stringify(value[, ...

  5. MUI下拉菜单样式

    <div class="mui-input-row my_select"> <label style="width: 47px;padding-righ ...

  6. 人大金仓KCI

    #include "bin/libkci.h" static void exit_nicely(KCIConnection *conn) { KCIConnectionDestor ...

  7. Android源码分析（十四）----如何使用SharedPreferencce保存数据

    一:SharedPreference如何使用 此文章只是提供一种数据保存的方式, 具体使用场景请根据需求情况自行调整. EditText添加saveData点击事件, 保存数据. diff --git ...

  8. 7.redis 集群模式的工作原理能说一下么？在集群模式下，redis 的 key 是如何寻址的？分布式寻址都有哪些算法？了解一致性 hash 算法吗？

    作者:中华石杉 面试题 redis 集群模式的工作原理能说一下么?在集群模式下,redis 的 key 是如何寻址的?分布式寻址都有哪些算法?了解一致性 hash 算法吗? 面试官心理分析 在前几年, ...

  9. Linux shell while循环语句

    for :明确循环次数 while :不确定循环换次数 while循环 (1) while CONDITION:do       statement       statement       < ...

  10. Linux操作系统安全-使用gpg实现对称加密

    Linux操作系统安全-使用gpg实现对称加密 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.gpg工具包概述 1>.什么是gpg GnuPG是GNU负责安全通信和数据存 ...