bootStrapTable 配置问题

最近在学习bootstrapTable,在配置完之后却连表格都没有显示出来，希望有人指点迷津  附上代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>照片展示</title>
     <link href="../statics/bootstrap/css/bootstrap.css" rel="stylesheet"/> 
     <link href="../statics/bootstrap/css/bootstrap-table.css" rel="stylesheet"/>
</head>
<body>
<table id="photoList"></table>

</body>
<script src="../statics/bootstrap/js/bootstrap-table.js"></script>
    <script src="../statics/bootstrap/js/bootstrap-table-zh-CN.js"></script>
   <script src="../statics/jquery/jquery-1.11.3.min.js"></script>
    <script src="../statics/bootstrap/js/bootstrap.js"></script>
  <script src="../statics/cherry/js/photo/photoJs.js?1" ></script>
</html>$(document).ready(function(){

$('#photoList').bootstrapTable({
method: 'post',
        url: "getPhotoList.do", 
     striped: true,
     dataType: "json",
     pagination: true,
     toolbar: '#toolbar',
     "queryParamsType": "limit",
     singleSelect: false,
     contentType: "application/x-www-form-urlencoded",
     pageSize: 10,
     pageNumber:1,
     showRefresh: true,
     cache:true,
     showToggle: true,
     search: false, //不显示 搜索框
     showColumns: true, //不显示下拉框（选择显示的列）
     sidePagination: "server", //服务端请求
     queryParams: queryParams,
     minimunCountColumns: 2,
//     responseHandler: responseHandler,
     columns: [
               {
    field: 'photoUrl',
    title: '图片',
    width: 100,
         align: 'center',
    valign: 'middle',
    sortable: false,
    formatter:function(value,row,index){
     var e = '<img height="22" width="22" class="img-rounded" onclick="imgClick(\''+ value +'\')" src=' + value +'>';
    return e;
    }
}
,
               
                {
                    field: 'photoId',
                    title: 'ID',
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                }
                ,
                
              
                {
                    field: 'photoType',
                    title: '类型',
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                }
                ,
                {
                    field: 'userId',
                    title: '操作用户Id',
                    width: 100,
                    align: 'center',
                    valign: 'middle',
                    sortable: false,
                }      ]
});
});
@RequestMapping("/getPhotoList")
@ResponseBody
public BootTablePage<photoUrl> getPhotoList(){
List<photoUrl> list = photoService.getPhotoList();
int total =photoService.getPhotoListCount();
BootTablePage<photoUrl> result = new BootTablePage<photoUrl>();
result.setRows(list);
result.setTotal(total);
return result;

}

解决方案 »

  1.   

    没用过这个不过  <table id="photoList"></table>  起码要绑定 字段field吧   
      

  2.   

    var data = [{'photoUrl':'','photoId':'1','photoType':'axa','userId':'admin'},{'photoUrl':'','photoId':'1','photoType':'axa','userId':'admin'}];
    //data的数据可以先用一个ajax去请求数据响应以后执行下面的代码初始化表格
    $("#table").DataTable({
                "paging": true,
                "data": data,
                "searching": false,
                "lengthChange": false,
                "sort": false,
                "columns":[
                    {name:'photoUrl', "title": "图片", 'render':function(full, type, data) {
                        return  '<img height="22" width="22" class="img-rounded" onclick="imgClick(\''+ data.photoUrl+'\')" src=' + data.photoUrl+'>';
                    }},
                    {"name": "photoId", "title": "ID", 'render':function(full, type, data) {
                        return  data.photoId;
                    }},
                    {"name": "photoType", "title": "类型", 'render':function(full, type, data) {
                        return  data.photType;
                    }},
                    {"name": "userId", "title": "用户编号", 'render':function(full, type, data) {
                        return  data.userId;
                    }}
                ]
            });
      

  3.   

    为什么要加 这个属性 "queryParamsType": "limit"  还有你的 contentType 写的对吗 不加charset=UTF-8 这个属性吗？ 其他的也没啥问题了 
      

  4.   

    还有一个问题 你应该先引用bootstrap 再引用bootstrap-table把
      

  5.   


          <script src="../statics/jquery/jquery-1.11.3.min.js"></script>
        <script src="../statics/bootstrap/js/bootstrap.js"></script>
         <script src="../statics/cherry/js/photo/photoJs.js?1" ></script>
     <script src="../statics/bootstrap/js/bootstrap-table.js"></script>
        <script src="../statics/bootstrap/js/bootstrap-table-zh-CN.js"></script>JS加载顺序问题，请将table的JS放最后