菜鸡一枚，自己在做项目时，碰到了一个类似这样的一个分页要求：
然后我一开始是有点懵逼的，因为这和我以往所看到的分页是不一样的。这里说明我只是一个小菜鸡...
这里的小圆点我是用js动态生成的，根据数据的总数以及页面容量。然后获取当前页码的话我是用索引代替的
jsp代码：
<ul class="caseInfo"> //循环输出图片
<c:forEach items="${pageSupportCompany.claimVoucher}" var="det" varStatus="status">
<li>
<a href="#" class="a1"><img src="/tjcrm_upload/${det.detailedpic}" /></a>
</li>
</c:forEach>
</ul>
<ul class="num"></ul> //小圆点
<script type="text/javascript">
//界面加载完毕执行以下程序
$(function(){
var count = ${pageSupportCompany.totalCount}; //从后台获取总行数
//根据总行数以及页面容量动态添加圆点个数
if(count/9 <= 1){
$('.content .num').append('<li></li>');
}else if(count%9 != 0){
count = Math.floor(count/9)+1;
for (var j = 0; j < count; j++) {
$('.content .num').append('<li></li>');
}
}
//默认情况下的第一个圆点进行背景设计
$('.content .num li').first().addClass('active');
//当点击小圆点时,进行后台数据的获取以及获取索引进行分页
$('.content .num li').click(function(){
var index = $(this).index()+1; //点击当前li 小圆点获取到索引，这里的加1是因为后台我进行了减一，我是懒得改了..
$.ajax({ //进行局部数据的刷新以及小圆点的样式改变
type: 'POST',
dataType:"json",
url : 'getDetailedById.do', //后台方法的url
data:{'typeId':1,'currPageNo':index},
cache: false,
async: true, //异步
success: function(result) {
var data = eval(result); //后台获取的json转为js
$('.content .caseInfo').children('li').remove(); //先把数据清空
for(var j = 0; j < data.length; j++){ //循环添加标签以及数据
$('.content .caseInfo').append(
'<li>'+
'<a href="#" class="a1">'+
'<img src="/tjcrm_upload/'+data[j].detailedpic+'" />'+
'</a>'+
'</li>'
);
}
}
});
$(this).addClass('active').siblings().removeClass('active'); //小圆点样式的更改
});
});
</script>
后台控制器代码：
//分页显示页面(显示第一页的数据)
@RequestMapping(value="getDetailed.do",method=RequestMethod.GET)
public String getDetailedInfo(HttpSession session,PageSupport<Company> pageSupport,HttpServletRequest req,
@RequestParam("typeId")String typeId ) throws IOException {
int typeid = Integer.valueOf(typeId).intValue();
pageSupport.setPageSize(9);
pageSupport.setCurrPageNo(0);
int totalCount = companyService.getCompanyCount();
System.out.println("数据总行数:"+totalCount);
req.setAttribute("count", pageSupport.getTotalCount());
pageSupport.setTotalCount(totalCount);
pageSupport.setCurrSize(pageSupport.getCurrPageNo()*pageSupport.getPageSize());
session.setAttribute("pageSupportCompany", pageSupport);
List<Company> detailedList = companyService.getDetailed(pageSupport,typeid);
pageSupport.setClaimVoucher(detailedList);
return "redirect:brand_designing.jsp";
}
//分页显示页面(根据小圆点异步刷新数据)
@RequestMapping(value="getDetailedById.do",method=RequestMethod.POST)
@ResponseBody
public String getDetailedInfoById(HttpSession session,PageSupport<Company> pageSupport,HttpServletRequest req,
HttpServletResponse resp,@RequestParam("typeId")String typeId ) {
int typeid = Integer.valueOf(typeId).intValue();
pageSupport.setPageSize(9);
//获取来自页面的当前页码
if(req.getParameter("currPageNo")!=null&&req.getParameter("currPageNo")!="") {
String currPageNo=req.getParameter("currPageNo");
int cpn = Integer.valueOf(currPageNo) - 1;
pageSupport.setCurrPageNo(cpn);
System.out.println("currPageNo"+pageSupport.getCurrPageNo());
}
int totalCount = companyService.getCompanyCount(); //数据总行数
pageSupport.setTotalCount(totalCount);
pageSupport.setCurrSize(pageSupport.getCurrPageNo()*pageSupport.getPageSize()); //sql分页的第一个参数
session.setAttribute("pageSupportCompany", pageSupport);
List<Company> detailedList = companyService.getDetailed(pageSupport,typeid);
pageSupport.setClaimVoucher(detailedList);
JSONArray jsonArray = JSONArray.fromObject(pageSupport.getClaimVoucher());
return jsonArray.toString(); //返回json
}
工具类PageSupport：
package com.ydg.util;
import java.util.List;
public class PageSupport<T> {
//当前页码-来自于用户输入
private int currPageNo = 0;
//总数量（表）
private int totalCount = 0;
//页面容量
private int pageSize = 12;
//总页数-totalCount/pageSize（+1）
private int totalPageCount = 1;
private List<T> claimVoucher;
private int currSize;
public int getCurrSize() {
return currSize;
}
public void setCurrSize(int currSize) {
this.currSize = currSize;
}
public final List<T> getClaimVoucher() {
return claimVoucher;
}
public final void setClaimVoucher(List<T> claimVoucher) {
this.claimVoucher = claimVoucher;
}
public final int getCurrPageNo() {
return currPageNo;
}
public final void setCurrPageNo(int currPageNo) {
if(currPageNo > 0){
this.currPageNo = currPageNo;
}else {
this.currPageNo = 0;
}
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount){
if(totalCount > 0){
this.totalCount = totalCount;
//设置总页数
this.setTotalPageCountByRs();
}
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
if(pageSize > 0){
this.pageSize = pageSize;
}
}
public int getTotalPageCount() {
return totalPageCount;
}
public void setTotalPageCount(int totalPageCount) {
this.totalPageCount = totalPageCount;
}
public void setTotalPageCountByRs(){
if(this.totalCount % this.pageSize == 0){
this.totalPageCount = this.totalCount / this.pageSize;
}else if(this.totalCount % this.pageSize > 0){
this.totalPageCount = this.totalCount / this.pageSize + 1;
}else{
this.totalPageCount = 0;
}
}
}
搞定后的效果图：
好啦，这就是我做的小圆点分页。期间给这个功能弄得差点奔溃，不过还好通过自身的努力搞定了，嘿嘿嘿