bootstrap与pagehelper实现分页效果(2)

ul.pagination>li>span,ul.pagination>li>a,ul.pagination>li.active>a,ul.pager>li>span{ cursor: pointer; } .input-page-div>input{ width:5em; height:1.8em; margin:0.4em 0.2em 0.2em 0.2em; text-align: center; } .input-page-div>.input-btn-xs{ margin-left:1em; font-size: 1em; width:3em; background-color: #337ab7; color:#fff; } .input-page-div{ display: inline-block; margin-left:1em; }

3.页面中添加一个div容器

<div></div>

4.js中添加一段代码

createPageNav({ $container : $("#paging"), pageCount : data.pages, currentNum : data.pageNum, afterFun : function(num){ getResult(num,10); } });

例：

function getResult(pageNum,pageSize){ $.ajax({ type: "GET", url: "../../metrics.do?type=8&pageNum="+pageNum+"&pageSize="+pageSize, data: {}, dataType: "json", success: function(data){ list = data.data; createPageNav({ $container : $("#paging"), pageCount : data.pages, currentNum : data.pageNum, afterFun : function(num){ getResult(num,10); } }); createList(data.data); // createSelect(data); console.info(data); } }); }

后台

5.引入pagehelper依赖

<!-- yuruixin add mybatis paging --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.1.6</version> </dependency>

6.service层添加如下代码

//pageSize=0时，查询所有 PageHelper.startPage(pageNum, pageSize); Page<ExtractMetrics> extractMetrics = extractMetricsMapper.selectByCondition(extractMetric,pageNum,pageSize);

7.controller层添加如下代码

Map<String,Object> map = new HashMap<String,Object>(); //查询页数 map.put("pageNum", extractMetrics.getPageNum()); //每页条数 map.put("pageSize", extractMetrics.getPageSize()); //总条数 map.put("total", extractMetrics.getTotal()); //总页数 map.put("pages", extractMetrics.getPages()); map.put("data", extractMetrics.getResult());

至此，bootstrap与pagehelper实现分页流程完毕

效果如下：