bootstraptable查看详情_BootstrapTable的简单使用教程

1.引入必须的几个包

2.定义一个table

3.写js代码

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,

},

]

});

}

4.后台数据List 结构的数据

@GetMapping("/table")

@ResponseBody

public List 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

Title

table

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,

},

]

});

}

@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 list = new ArrayList();

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 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";

}

}