bootStrap table spring mvc 详细运用实例

页面：

<div class="container-fluid">
		<div id="toolbar" class="btn-group">
			<a href="<@url value='/view/user/emp/add' />"><button type="button" id="add" class="btn btn-default" >
				<i class="glyphicon glyphicon-plus"></i>
			</button></a>
			<a><button οnclick="editHr();" type="button" id="edit" class="btn btn-default">
				<i class="glyphicon glyphicon-pencil"></i>
			</button></a>
			<a><button type="button" οnclick="deleteHr();" id="delete" class="btn btn-default">
				<i class="glyphicon glyphicon-trash"></i>
			</button></a>
		</div>
		<table id="empUserList" >
		</table>  <!-- 留意-->
	</div>

JS：

$(function() {
    querys();
})

function querys() {
    $("#edit").attr({"disabled":"disabled"});
    $("#delete").attr({"disabled":"disabled"});
    $("#empUserList").bootstrapTable({
        url : '../../../admin/hrEmployee/list',
        height : '500',
        undefinedText : '-',
        pagination : true, // 分页
        striped : true, // 是否显示行间隔色
        queryParams : queryParams,
        cache : false, // 是否使用缓存
        pageList : [ 5, 10, 20 ],
        toolbar : "#toolbar",// 指定工具栏
        showColumns : true, // 显示隐藏列
        showRefresh : true, // 显示刷新按钮
        uniqueId : "userName", // 每一行的唯一标识
        sidePagination : "server", // 服务端处理分页
        columns : [ {
            field : 'state',
            checkbox : true,
            align : 'center',
            valign : 'middle'
        }, {
            title : '用户名',
            field : 'userName', // 字段
            align : 'center', // 对齐方式（左 中 右）
            valign : 'middle', //
            sortable : true
        }, {
            title : '用户编号',
            field : 'empNo',
            align : 'center',
            valign : 'middle',
            sortable : true
        }, {
            title : '姓名',
            field : 'empName',
            align : 'center',
            valign : 'middle',
            sortable : true
        }, {
            title : '职位',
            field : 'position',
            align : 'center',
            valign : 'middle',
            sortable : true
        }, {
            title : '状态',
            field : 'isDelete',
            align : 'center',
            valign : 'middle',
            formatter : genderFormatter,
            sortable : true
        } ],
        responseHandler : function(res) {
            return {
                total : res.total,
                rows : res.records
            };
        },
        onCheck:function(){
            buttonControl('#empUserList','#edit','#delete');
        },
        onCheckAll:function(){
            buttonControl('#empUserList','#edit','#delete');
        },
        onUncheckAll:function(){
            buttonControl('#empUserList','#edit','#delete');
        },
        onUncheck:function(){
            buttonControl('#empUserList','#edit','#delete');
        }
    })
}
/** 替换数据为文字 */
function genderFormatter(value) {
    if (value == null || value == undefined) {
        return "-";
    } else if (value==1) {
        return "已删除";
    } else if(value==0){
        return "正常";
    }
}
/** 刷新页面 */
function refresh() {
    $('#empUserList').bootstrapTable('refresh');
}
/**查询条件与分页数据 */
function queryParams(pageReqeust) {
    pageReqeust.enabled = $("#enabled").val();
    pageReqeust.querys = $("#querys").val();
    pageReqeust.pageNo = this.offset;
    pageReqeust.pageSize = this.pageNumber;
    return pageReqeust;
}
/** 编辑数据 */
function editHr() {
    var selectRow = $("#empUserList").bootstrapTable('getSelections');
    if (selectRow.length != 1) {
        layer.alert('请选择并只能选择一条数据进行编辑！', {icon: 2});
        return false;
    } else {
        window.location = createUrl("admin/hrEmployee/view?username=" + selectRow[0].userName);
    }
}
/**
 * 删除数据
 */
function deleteHr() {
    var hrs = $("#empUserList").bootstrapTable('getSelections');
    if (hrs.length < 1) {
        layer.alert('请选择一条或多条数据进行删除！', {icon: 2});
    } else {
        layer.confirm('确定要删除所选数据？', {icon: 3, title:'提示'}, function(){
            var userNames = [];
            for (var i=0;i<hrs.length;i++){
                    userNames.push(hrs[i].userName);
            }
            $.ajax({
                url:'../../../admin/hrEmployee/delete',
                traditional: true,  //阻止深度序列化，向后台传送数组
                data:{userNames:userNames},
                contentType:'application/json',
                success:function(msg){
                    if(msg.success){
                        layer.alert(msg.msg,{icon:1});
                    }else{
                        layer.alert(msg.msg,{icon:2});
                    }
                    refresh();
                    $("#edit").attr({"disabled":"disabled"});
                    $("#delete").attr({"disabled":"disabled"});
                }
            })
          });
    }
}

Conctroller类

@RequestMapping(value = "/hrEmployee/list", method = RequestMethod.GET)
    @ResponseBody
    public PageResponse<HrEmployee> getAllEmployee(HttpServletRequest request) {
        try {
            return adminservice.getAllEmployee(request);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
  

Service类

@Transactional(propagation = Propagation.NOT_SUPPORTED, readOnly = true)
    public PageResponse<HrEmployee> getAllEmployee(HttpServletRequest request) throws Exception {
        Map<String, Object> pageMap = RequestUtils.getRequestParams(request);
        PageResponse<HrEmployee> pageresponse = new PageResponse<HrEmployee>();

        pageRequest.setPageNo(Integer.valueOf(pageMap.get("pageSize").toString())); // 当前页数
        pageRequest.setPageSize(Integer.valueOf(pageMap.get("limit").toString())); // 每页显示页数
        
        map.put("pageRequest", pageRequest);
        List<HrEmployee> listHr = adminStratorMapper.getAllEmployee(map); //当前页显示的数据
        Integer total = adminStratorMapper.getTotalEmployee(map);  //数据总条数
        pageresponse.setRecords(listHr);
        pageresponse.setTotal(total);
        return pageresponse;
    }

PageResponse类

public class PageResponse<T> implements Serializable {
    private static final long serialVersionUID = 768549219446295665L;
    private Integer total;  //总条数
    private List<T> records; //当前页显示数据

    public Integer getTotal() {
        return total;
    }

    public void setTotal(Integer total) {
        this.total = total;
    }

    public List<T> getRecords() {
        return records;
    }

    public void setRecords(List<T> records) {
        this.records = records;
    }
}

关于bootstrap table的详细方法和参数 可以看一下官方文档: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/