1、後臺java代碼(Mybatis Plus分頁)html
(1)Mybatis Plus分頁的配置,在mybatis的xml文件中增長以下配置(Mybatis Plus官方文檔:http://baomidou.oschina.io/mybatis-plus-doc/#/quick-start)java
<!-- 插件配置項 --> <property name="plugins"> <array> <!-- 分頁插件配置 --> <bean id="paginationInterceptor" class="com.baomidou.mybatisplus.plugins.PaginationInterceptor"> <property name="dialectType" value="mysql" /> </bean> </array> </property>
(2)mappermysql
List<Entity> selectPageById(Pagination page,String id);//Pagination 爲Mybatis plus分頁插件的實體
(3)serviceajax
/** * 分頁查詢 */ public Page<Entity> selectPageById(Page<Entity> page,Stringid) { Page<Entity> limitPage = page.setRecords(informationCodeMapper.selectPageById(page,id)); return limitPage; }
(3)controller(注意:mybatis plus的分頁時,查詢的數據存放在records屬性中)sql
/** * BootStrap Table分頁 * @param pageNumber 頁數 * @param pageSize 每頁顯示數據的條數 * @param request * @return */ @RequestMapping("/pageTest.shtml") @ResponseBody public String informationList(String pageNumber, String pageSize, String id, HttpServletRequest request) { if(!StringUtils.isNotBlank(pageNumber) & !StringUtils.isNotBlank(pageSize)){ pageNumber="1"; pageSize="10"; } //分頁 pageNumber--》頁數 pageSize--》每頁顯示數據的條數 int page_Num = Integer.parseInt(pageNumber); int page_Size = Integer.parseInt(pageSize); Page<Entity> page = new Page<Entity>(page_Num, page_Size); Page<Entity> selectPageByCsdbId = informationService.selectPageById(page, csdbId); //bootstrap-table要求服務器返回的json須包含:total,rows Map<String, Object> map = new HashMap<String, Object>(); map.put("total", selectPageById.getTotal()); map.put("rows", selectPageById.getRecords()); return JSON.toJSONString(map); }
2、前臺js (BootStrap Table分頁)json
$(function(){ /*boostrap table*/ $('#informationTable').bootstrapTable({ columns: [{ field: 'checkBox', checkbox:true, align:"center" }, { field: 'id', title: 'ID', visible : false,//隱藏該列 align:"center" }, { field: 'informationCode', title: 'Information Code', align:"center", }, { field: 'infoName', title: 'InfoName', align:"center", },{ field:"suggesteddmtype", title:"Suggested Dm Type", align:"center", class:"table-select2", },{ field:"operation", title:"操做", align:"center", formatter : "actionFormatter",//自定義方法 }], method: 'post', contentType: "application/x-www-form-urlencoded",//必需要有!由於bootstap table使用的是ajax方式獲取數據,這時會將請求的content type默認設置爲 text/plain,這樣在服務端直接經過 @RequestParam參數映射是獲取不到的。 url:"pageTest.shtml?time="+getTimestamp,//要請求數據的文件路徑,加時間戳,防止讀取緩存數據 sortable: true, //是否啓用排序 sortOrder: "informationCode asc", //排序方式 pagination: true,//是否開啓分頁(*)啓動分頁,必須設爲true queryParamsType:'',//注意:查詢參數組織方式,默認值爲 'limit',在默認狀況下 傳給服務端的參數爲:offset,limit,sort 。 設置爲 '' 在這種狀況下傳給服務器的參數爲:pageSize,pageNumber queryParams:queryParams,//請求服務器時所傳的參數 pageNumber:1,//初始化加載第一頁,默認第一頁 pageSize: 10,//每頁的記錄行數(*) pageList: [10,20,30,50],//可供選擇的每頁的行數(*) sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*) toolbar:".custom-btn-list" }); }) //獲得查詢的參數 function queryParams (params) { var temp = { //這裏的鍵的名字和控制器的變量名必須一直,這邊改動,控制器也須要改爲同樣的 pageSize: params.pageSize, //頁面大小 pageNumber: params.pageNumber, //頁碼 searchText : params.searchText, }; return temp; };}
3、結果展現bootstrap