Bootstrap Table数据表格的使用指南

var params = $(‘#queryForm’).serializeObject();

params.limit = param.limit;

params.offset = param.offset;

params.search = param.search;

params.sort = param.sort;

params.order=param.order;

return params;

},

columns:[{

checkbox: true //多选框

},{

field: ‘id’, //每列的字段名

title: ‘id’, //表头所显示的名字

halign: ‘center’, //表头的对齐方式

valign: ‘middle’, //表格对齐方式居中

order: ‘asc’, //默认排序方式

sortable: true, //设置可以排序

align: ‘center’ //表格数据对齐方式

},{

field: ‘name’,

title: ‘姓名’,

valign: ‘middle’,

halign: ‘center’,

align: ‘center’

},{

field: ‘username’,

title: ‘用户名’,

valign: ‘middle’,

halign: ‘center’,

align: ‘center’

}]

});

//设置表格高度

function tableHeight() {

return $(window).height() - 100;

}

其中url是设置请求数据源地址。

queryParams属性是设置传递请求携带的参数。

height属性设置表格的高度，可以写固定值，也可以使用JS方法，返回一个高度。

columns属性是设置显示数据字段内容，其中field属性值需要和实体类对应。

student/page请求数据源后台方法（这里持久层框架是用的Spring-Data-Jpa，只要最后返回的JSON数据格式一样就可以，下面有JSON数据格式样式）。

@RequestMapping(value=“/page”)

@ResponseBody

public Object page(TablePageable pageParam, StudentForm form) {

PageRequest pageable = pageParam.bulidPageRequest();

Specification spec = buildSpec(form);

Page page = studentService.findAll(spec, pageable);

return AjaxResult.bulidPageResult(page);

}

//动态查询，可以写查询条件

public Specification buildSpec(StudentForm form){

return null;

}

其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。

TablePageable类代码如下。

import org.springframework.data.domain.PageRequest;

import org.springframework.data.domain.Sort;

import org.springframework.data.domain.Sort.Direction;

import org.springframework.data.domain.Sort.Order;

public class TablePageable{

private Integer limit; //分页

private Integer offset;//首记录号（从0开始）

private String sort; //排序字段

private String order; //顺序，逆序

private Integer page; //分页

public Integer getPage() {

return page;

}

public void setPage(Integer page) {

this.page = page;

}

public Integer getLimit() {

return limit;

}

public void setLimit(Integer limit) {

this.limit = limit;

}

public Integer getOffset() {

return offset;

}

public void setOffset(Integer offset) {

this.offset = offset;

}

public String getSort() {

return sort;

}

public void setSort(String sort) {

this.sort = sort;

}

public String getOrder() {

return order;

}

public void setOrder(String order) {

this.order = order;

}

public PageRequest bulidPageRequest() {

int page = (offset != null && limit != null) ? offset / limit : 0;

int size = limit != null ? limit : 10;

if(sort == null) {

return PageRequest.of(page, size);

}else {

Order order2 = new Order(Direction.fromString(order), sort);

Sort sort2=Sort.by(order2);

return PageRequest.of(page, size, sort2 );

}

}

public PageRequest myBulidPageRequest() {

int page = getPage();

int size = limit != null ? limit : 10;

if(sort == null) {

return PageRequest.of(page, size);

}else {

Order order2 = new Order(Direction.fromString(order), sort);

Sort sort2 = Sort.by(order2);

return PageRequest.of(page, size, sort2 );

}

}

public PageRequest bulidPageable(Sort sort) {

int page = (offset != null && limit != null) ? offset / limit : 0;

int size = limit != null ? limit : 10;

return PageRequest.of(page, size, sort);

}

public Sort bulidSort() {

Order order2 = new Order(Direction.fromString(order), sort);

Sort sort2 = Sort.by(order2);

return sort2;

}

}

返回的AjaxResult类为返回提示的一个类。bulidPageResult方法，是返回表格所需要的格式数据。代码如下。

import java.util.HashMap;

import org.springframework.data.domain.Page;

public class AjaxResult {

private Boolean success;

private String msg;

public Boolean getSuccess() {

return success;

}

public void setSuccess(Boolean success) {

this.success = success;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public AjaxResult(String msg) {

super();

this.success=true;