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

随机推荐

Vue.js 源码分析(十一) 基础篇过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
如何解决aws解绑银行卡问题？
首先先来说明一下我自己的情况? 一年的免费使用前提:没有开启任何的实例服务先贴一条官方的解释关于我小白一个.学校课程要求使用aws,注册之后在网络上看到一堆人踩坑,aws的扣费就是个坑! 预授权 ...
Centos6 No CMAKE_CXX_COMPILER could be found
[1]问题现象 cmake发生异常:如下图所示 [2]问题分析 Centos6 上使用Cmake出现错误 "No CMAKE_CXX_COMPILER could be found.&quo ...
.net core vue+wangEditor (双向绑定) 上传图片和视频功能
最终效果,是这样的,现在开始记录怎么做: 开始 npm 安装 wangEditor 安装好后, 因为要用vue 双向绑定 ,所以我就把wangwangEditor 做成了一个封装组件,先看一下目录 ...
Blend Brush介绍
原文:Blend Brush介绍这篇文章会介绍 Blend怎么设置Brush 全局画刷 1)blend面板的介绍这5个rectangle分别对应 blend中的 5个设置 1 设置无颜色 2 设置 ...
Dapper学习(三)之其他用法
这里说的其他用法,是指 Async,Buffered,Transaction,Stored Procedure. 1. 首先 dapper支持异步 ExecuteAsync, QueryAsync, ...
JS 弹窗“是否删除”
var r = confirm("是否确认删除!");if (r == true) {location.href = "/Employees/Delete/" ...
ansible简易使用
一.本地环境: centos 7 192.168.10.10 主控机 centos 7 192.168.10.130 被控机 Windows7 192.168.10.13 ...
CTF-代码审计(2)
1.bugku 备份是个好习惯网址:http://123.206.87.240:8002/web16/ 进去什么都没有,题目说备份想到备份文件,所以直接再后面加个 .bak 拿到源码: < ...
poi坑点（springboot）
工作上需要写了一个将数据库数据生成excel表的接口,在此过程中遇到了一些坑点,现在此纪录 PS:一部分可能是因为我没用明白 1. 样式问题自动调整尽量不要使用,部分列留白过多,空列列宽过窄,可能是 ...

BootstrapTable的简单使用教程

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

随机推荐

热门专题