1、bootstrap-table是在bootstrap的基础上面做了一些封装，所以在使用bootstrap-table之前要导入的js和css有

　　1）基本的还是jQuery

　　2）引入bootstrap

　3）引入bootstrap-table

2、页面的编写方式（建议）

3、具体的数据加载和处理都在js里面完成，具体的实现过程不用自己去写，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",            title:"模型名称",            align: "center",                    },{            field:"modelDescription",            title:"模型描述",            align: "center"        },{            field:"executeType",            title:"执行类型",            align: "center"        },{            field:"typeName",            title:"模型类型",            align: "center"        },{            field:"price",            title:"价格",            align: "center"        },{            field:"publishDate",            title:"发布时间",            align: "center",            formatter: function(v){                 var date = new Date(v).format("yyyy-MM-dd hh:mm:ss");                    return ""+date+"";            }        },{            field:"shortcutOperation",            title:"快捷操作",            align: "center",            formatter: function(v,r,i){                var str = "
     
      "+                          "
      申请权限"+                          "
     
"                if(r.status=='00'){                    var str = "
     
      "+                              "
      已申请"+                              "
     
"                }                return str;            }        }]    });

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

　这里说明几个问题：

　　1）这里加入这部分（ bootstrapTable("destroy") ）的目的是页面存在刷新效果需要重新加载

　　2）相对应的设置参考官方文档：

　　3）后面简单说一下具体的效果设置：在具体的单元格数据中可以使用formatter()方法来实现，其中存在3个值v,r,i分别是值，行数据，角标。具体的效果可以参考着bootstrap的方式来实现通过return的方式来给页面呈现不一样的效果，当然也可以设置直接设置效果通过cellStyle方法也是可以的！

　　4）传参：这个根据个人的一个实现功能来做，不管有没有数据，后台传过去的不是null而是""。limit和offset是做分页处理需要传给后台　

4、然后就是后台的一个处理（很重要）

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

　　说明：

　　1）数据返回的形式：

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

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

　　2）返回的时候通过json的方式放回，这里不建议springmvc自动返回，建议通过PrintWriter的方式写出到前台，不然会出现json方面的错误。

5、展示效果

提示：搜索功能需要自己做，传入的参数也是通过上面的传入

6.问题：因为考虑到接送的传输问题，在bootstrap-table里面存在post请求的问题，这也是我一直没有解决的问题！

　　1）因为bootstrap-table对post请求进行了封装，在使用post请求的时候取不到数据（我也在研究这个问题，希望高人指点）

　　2）后台数据封装的字段名问题，必须要一样才可以，不用别名返回的是字段名1234。。这个是因为hibernate造成的，其他框架略过

 7.相关问题处理

　　1）由于bootstrap-table中的表头和内容是分两个table来显示的，导致很多时候出现缩小窗口过后，出现两个表格出现错误的问题处理方式如下：

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

　　说明：这个是利用jQuery对窗口方法的实现，来帮定的事件。通过bootstrap-table的bootstrapTable方法来实现窗口重置。