BootStrap Table对前台页面表格的支持实例讲解

<script type="text/javascript" src="js/jquery.min.js?v=2.1.4"></script>

<script type="text/javascript" src="js/bootstrap.min.js?v=3.3.6"></script>
<link rel="stylesheet" href="css/bootstrap.min14ed.css?v=3.3.6">

<script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css">

<div class="table">
 <table id="publish_model"></table>
 </div>

//这里是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 "<span>"+date+"</span>";
   }
  },{
   field:"shortcutOperation",
   title:"快捷操作",
   align: "center",
   formatter: function(v,r,i){
    var str = "<div class='btn-group'>"+
       "<button id="+r.modelId+" class='btn btn-success btn-xs' onclick='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, Object> getModelPublishList(Integer limit,Integer offset,String modelName,String typeId,HttpServletResponse response) throws IOException{
  //设置相应数据格式
  response.setContentType("application/json;charset=utf-8");
  try {
   // 获取相应数据
   Map<String, Object> modelList = modelManager
     .getModelPublishListData(limit, offset, modelName,typeId);
   return modelList;
  } catch (Exception e) {
   e.printStackTrace();
   throw e;
  } finally {
   HibernateSessionFactory.closeSession();
  }
 }

Map<String, Object> map = new HashMap<String,Object>();
map.put("total", "分页时采用的数据总条数");//这里可以单独写一个sql来实现总条数
map.put("rows", "数据的list集合");//这里可以获取相对应的数据

List list = querySql.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();//这是我用hibernate执行的map结果会自动封装成Map