ssm+bootstrap-table+PageHelper分页

参考:

http://www.cnblogs.com/landeanfen/p/4976838.html

http://blog.csdn.net/wzj0808/article/details/59104035

本来bootstrap-table就有服务端分页,这次介绍的是使用ssm框架结合PageHelper结合bootstrap-table来分页,PageHelper和bootstrap-table的引入我就不再介绍了.

• Mapper接口:

public interface DormitoryMapper {
   List<UserDetail> getDormitoryliveinfo(@Param("strDormitorynumber") String strDormitorynumber, @Param("strRoomnumber") String strRoomnumber);
  }

• Service接口:

public interface DormitoryService {
   //分页
   PageInfo<UserDetail> getDormitoryliveinfo(String strDormitorynumber,String strRoomnumber,Integer currentPage, Integer pageSize); 
}

• ServiceImpl:

@Service
public class DormitoryServiceImpl implements DormitoryService {
@Autowired
DormitoryMapper dormitoryMapper;
@Override
public PageInfo<UserDetail> getDormitoryliveinfo(String strDormitorynumber, String strRoomnumber,Integer currentPage,Integer pageSize) {
   // TODO Auto-generated method stub
   PageHelper.startPage(currentPage,pageSize);
   List<UserDetail> list =  dormitoryMapper.getDormitoryliveinfo(strDormitorynumber, strRoomnumber);
   PageInfo<UserDetail> pageInfo = new PageInfo<>(list);
   return pageInfo;
}}

• controller:

@Controller
@RequestMapping("/dormitory")
public class DormitoryController {
@Autowired
DormitoryService dormitoryService;
@RequestMapping("/getDormitoryliveinfo")
@ResponseBody
public PageInfo<UserDetail> getDormitoryliveinfo(String strDormitorynumber,String strRoomnumber,Integer currentPage,Integer pageSize){
   PageInfo<UserDetail> pageInfo = dormitoryService.getDormitoryliveinfo(strDormitorynumber, strRoomnumber,currentPage,pageSize);
    return pageInfo;
}}

• 前台:

$('#tabletest').bootstrapTable({
        columns: [{
            field: 'username',
            title: '用户名',
        }, {
            field: 'name',
            title: '姓名',
        }, {
            field: 'phone',
            title: '联系方式',
        },{
            field: 'email',
            title: '邮件',
        },{
            field: 'dept.dept',
            title: '部门',
        },{
            field: 'dormitory.dormitory_number',
            title: '宿舍楼',
        },{
            field: 'dormitory.room_number',
            title: '房间号',
        },{
            field: 'dormitory.tnumber',
            title: '总数',
        },{
            field: 'dormitory.left_number',
            title: '剩余数量',
        }
        ],
        showToggle:true,
        showRefresh: true,
        locale:'zh-CN',//中文支持
        //页面需要展示的列，后端交互对象的属性
        pagination: true,  //开启分页
        sidePagination: 'server',
        pageNumber: 1,//默认加载页
        pageSize: 10,//每页数据
        pageList: [5,10,15,20],//可选的每页数据
        queryParamsType:'',//queryParamsType的默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                            //设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber */
    queryParams: function (params) {
            return {
            strDormitorynumber: strDormitorynumber,
            strRoomnumber:strRoomnumber,
            currentPage:params.pageNumber,
            pageSize:params.pageSize
            }
        },//请求服务器数据时的参数
        url: '/getDormitoryliveinfo', //服务器数据的加载地址
    responseHandler:function(res){
        //在ajax获取到数据，渲染表格之前，修改数据源
        var nres = [];
        nres.push({total:res.total,rows:res.list});
        return nres[0];
    }
    });

说明:

    前台中设置sidePagination为server,按照其他博主所述,返回的是包含total,rows的json格式,类似于:

1. {  
2.     "total": 200,  
3.     "rows": [  
4.         {  
5.             "id": 0,  
6.             "name": "Item 0",  
7.             "price": "$0"  
8.         },  
9.         {  
10.             "id": 1,  
11.             "name": "Item 1",  
12.             "price": "$1"  
13.         },  
14.         {  
15.             "id": 2,  
16.             "name": "Item 2",  
17.             "price": "$2"  
18.         }  
19.     ]  
20. }  

而PageHelper插件返回的json对象中,包含了很多很多信息,包括当前页下一页总数及数据等等,所以,要对json进行处理,挑选出只包含total和rows数据部分:

 responseHandler:function(res){
        //在ajax获取到数据，渲染表格之前，修改数据源
        var nres = [];
        nres.push({total:res.total,rows:res.list});
        return nres[0];
    }
    });

在上面这个处理函数中,挑选出了total和rows,这里res.list的list名,是在Impl实现类中的List<UserDetail>实例化的名称,这样处理后,就达到了 sidePagination:'server'设置的格式要求.

前端分页就不进行阐述了.