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的简单使用教程

最新文章

热门文章