參考:

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];
}
    });

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. }  

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