bootstart-table的使用和controller层传值

整理一下使用过的bootstart-table，，首先当然导入js.css:

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

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

<script type="text/javascript" src="js/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>

bootstrap-table-zh-CN.js这个事转换成中文的，，导入这些js之前要导入jquery.js，table.js需要在bootstrap.js之后导入，就这两个注意事项。

页面上写：

<table  data-toggle="table"  id="table" class="hovertable" >
    
</table>

js里面写  其中queryParamsType : "undefined",这个关系到分页的很重要：

$("#table").bootstrapTable({ // 对应table标签的id
       url: "querySchools", // 获取表格数据的url
       method : 'post', // 服务器数据的请求方式 get or post
       cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
       striped: true,  //表格显示条纹，默认为false
       pagination: true, // 在表格底部显示分页组件，默认false
       pageList: [10, 20], // 设置页面可以显示的数据条数
       contentType : "application/x-www-form-urlencoded", //发送到服务器的数据编码类型
       pageSize: 10, // 页面数据条数
       pageNumber: 1, // 首页页码
       sidePagination: 'server', // 设置为服务器端分页
       // 设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
       // 设置为limit可以获取limit, offset, search, sort, order
       queryParamsType : "undefined",      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
             console.log(params);
           return {
               pageSize: params.pageNumber, // 每页要显示的数据条数
               pageNumber: params.pageSize, // 每页显示数据的开始行号
           }
       },
       columns: [
          /*  {
               checkbox: true, // 显示一个勾选框
               align: 'center' // 居中显示
           }, */ {
               field: 'id', // 返回json数据中的name
               title: 'ID', // 表格表头显示文字
               align: 'center', // 左右居中
               valign: 'middle' // 上下居中
           }, {
               field: 'province',
               title: '省',
               align: 'center',
               valign: 'middle'
           }, {
               field: 'city',
               title: '市',
               align: 'center',
               valign: 'middle',
           }, {
               field: 'name',
               title: '申请表校名',
               align: 'center',
               valign: 'middle',
           }, {
               title: "操作",
               align: 'center',
               valign: 'middle',
               width: 160, // 定义列的宽度，单位为像素px 
               formatter: function (value, row, index) {
                   return '<button class="btn btn-primary btn-sm"  id="\''+row.id+'" tag="\''+row.name+'" value="\''+row.city+'"  >添加学校</button>';
               }
           }
       ],
       onl oadSuccess: function(){  //加载成功时执行
             console.info("加载成功");
       },
       onl oadError: function(){  //加载失败时执行
             console.info("加载数据失败");
       }})

controller层里写，注意用rows和total把查询到的表格信息，和所有行数传值过去：

@RequestMapping(value="querySchools",method=RequestMethod.POST)
     @ResponseBody
     public Object queryS(int pageSize,int pageNumber) {
         List<ApplicantSchool> list=schoolService.querySchool((pageSize-1)*pageNumber,pageNumber);
         int pageTotal=schoolService.queryAllCount();
         Map<String, Object> result = new HashMap<>();
         result.put("rows", list);
         result.put("total", pageTotal);
         return result;
     }

其中 table返回值需要 json格式，所以用map返回过去，很重要，pageSize，pageNumber。