ssm+bootstrap-table+PageHelper分頁
阿新 • • 發佈:2019-01-06
參考:
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 classDormitoryServiceImpl 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格式,類似於:
- {
- "total": 200,
- "rows": [
- {
- "id": 0,
- "name": "Item 0",
- "price": "$0"
- },
- {
- "id": 1,
- "name": "Item 1",
- "price": "$1"
- },
- {
- "id": 2,
- "name": "Item 2",
- "price": "$2"
- }
- ]
- }
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'設定的格式要求. 前端分頁就不進行闡述了.