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 可以 ...

随机推荐

Salesforce学习之路（二）Profile
如上篇文章所述,针对User来讲,最重要的概念便是Profile和Role,因为Profile于Security息息相关,这是一个合格的产品中十分重要的一环. 何为Profile? 前文所讲--就是一 ...
idea类存在找不到解决办法
清除idea缓存,
Java SPI机制：ServiceLoader实现原理及应用剖析
一.背景 SPI,全称Service Provider Interfaces,服务提供接口.是Java提供的一套供第三方实现或扩展使用的技术体系.主要通过解耦服务具体实现以及服务使用,使得程序的可扩展 ...
protobuf 中import 的使用
目录结构如下: test.proto的文件内容如下: syntax="proto2"; package com.eagle.mohrss; option java_outer_cl ...
MySQL 中获取用户表、用户视图、用户表中列信息
直接贴代码了: /// <summary> /// MySql 数据库维护中心 /// </summary> public class MySqlDbMaintenance:D ...
UWP 使用Launcher 启动迅雷
不得不说UWP有些地方真的不方便! 另外也要夸一下迅雷,还是蛮不错的! 代码 await Launcher.LaunchUriAsync(new Uri("magnet:?xt") ...
记Flask的一种设置项目配置的方法！
在做项目时,碰到的一种设置配置的方式,主要是因为公司将所有的配置写成了一个公司专有的配置库(各种资源地址,账号等),上线后的项目需要什么配置是从这个配置库的读取.但在开发时不能使用,所以在开发时需要自 ...
Nacos配置中心
本文介绍spring cloud 集成 nacos案例官方文档:https://nacos.io/zh-cn/docs/what-is-nacos.html](https://nacos.io/zh ...
vue-Element-axios搭建调用api进行数据展示
1全局安装vue-cli 输入命令:npm install vue-cli -g 2创建项目框架输入命令:vue init webpack vueapi 3依次按照提示输入,项目名.项目描述.项目作 ...
消息队列mq总结
一.消息队列概述消息队列中间件是分布式系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构.目前使用较多的消息队列有ActiveMQ,RabbitM ...

BootstrapTable的简单使用教程

BootstrapTable的简单使用教程的更多相关文章

随机推荐

热门专题