bootstrap-table对前台页面表格的支持

//这里是js的具体代码的样式处理
dynamicTable = $("#publish_model").bootstrapTable("destroy").bootstrapTable({        url: "model/getPublishModel",                                                    striped: true,                                                   pagination: true,         singleSelect: true,        clickToSelect: true,            pageNumber:1,                               pageSize: 10,                               pageList: [5, 10, 20],          sidePagination: "server",        queryParamsType: "limit",        queryParams: getPageMessage,        minimunCountColumns: 2,        height:$(window).height()*0.85,        columns:[{            field:"modelName",             :"模型名称",            align: "center",                    },{            field:"modelDe ion",             :"模型描述",            align: "center"        },{            field:"executeType",             :"执行类型",            align: "center"        },{            field:"typeName",             :"模型类型",            align: "center"        },{            field:"price",             :"价格",            align: "center"        },{            field:"publishDate",             :"发布时间",            align: "center",            formatter: function(v){                 var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");                    return "<span>"+date+"</span>";            }        },{            field:"shortcutOperation",             :"快捷操作",            align: "center",            formatter: function(v,r,i){                var str = "<div class='btn-group'>"+                          "<button id="+r.modelId+" class='btn btn-success btn-xs'  ='applyReason(""+r.modelId+"")'>申请权限</button>"+                          "</div>"                if(r.status=='00'){                    var str = "<div class='btn-group'>"+                              "<button class='btn btn-success btn-xs' style='background:#ccc;border-color:#ccc;' >已申请</button>"+                              "</div>"                }                return str;            }        }]    });

//传递参数到后台function getPageMessage(params){    var temp={        limit: params.limit,        offset: params.offset,        modelName:$("#model_name").val(),        typeId:$("#modelType").val()    };    return temp;}

　@RequestMapping("/getPublishModel")    @ResponseBody    public Map<String,  > getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{        //设置相应数据格式        response.setContentType("application/json;charset=utf-8");        try {            // 获取相应数据            Map<String,  > modelList = modelManager                    .getModelPublishListData(limit, offset, modelName,typeId);            return modelList;        } catch (Exception e) {            e.printStackTrace();            throw e;        } finally {            HibernateSessionFactory.closeSession();        }    }

Map<String,  > map =  new HashMap<String, >();map.put("total", "分页时采用的数据总条数");//这里可以单独写一个sql来实现总条数map.put("rows", "数据的list集合");//这里可以获取相对应的数据
注意：因为前台和字段名字要对应所以，list的泛型可以是对象的形式，也可以是Map<String,  >的形式

List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//这是我用hibernate执行的map结果会自动封装成Map
sql里面一定要设置别名，比如：m.modelId AS modelId等

$('#publish_model').bootstrapTable(); // init via      $(window).resize(function () {        $('#publish_model').bootstrapTable('resetView');    });