html代码:
<div class="pager">
<div class="pagerBox">
<ul>
<li class="num fixp"><a href="javascript:void(0)" id="first_page">首页</a></li>
<li class="prev"><a href="javascript:void(0)">上一页</a></li>
<li class="num current" onclick="num(1)"><span id="currentIndex">1</span></li>
<li class="next"><a href="javascript:void(0)">下一页</a>
</li><li class="num fixp" id="last_page"><a href="javascript:void(0)">末页</a></li>
<li class="count">共15页</li>
</ul>
<input type="hidden" id="list_mid" value=""/>
<div class="jumptopage">
<i class="switch"> | 跳转到第</i>
<input type="text" id="gotoPage" name="gotoPageNo" value="1">
<input type="hidden" id="maxPage" value="15">
<input type="hidden" id="currentUrl" value="" name="currentUrl" >
<i class="ym">页</i>
</div>
<button class="confirm" onclick="_confirm()">确认</button>
</div>
</div>
js代码:通过点击事件来改变页数,通过页数向后台发送请求获取新的数据;
//分页
var page_index = 1;//当前页数,默认第一页为首页
var page_total = 0;//总共页数,获total/size获得
var size=16;//每页数量
var total =0;//总共多少条记录
$("#first_page").click(function(){
if(page_index<=1) return;
page_index=1;
$("#currentIndex").html(page_index);
getDisplayList();
});
$(".prev").click(function(){
if(page_index<=1) return;
page_index--;
$("#currentIndex").html(page_index);
getDisplayList();
});
$(".next").click(function(){
if(page_index>=page_total) return;
page_index++;
$("#currentIndex").html(page_index);
getDisplayList();
});
$("#last_page").click(function(){
if(page_index>=page_total) return;
page_index = page_total;
$("#currentIndex").html(page_index);
getDisplayList();
});
function _confirm(){
if (!($("#gotoPage").val())) {
dialogModule.iTips('请输入页数');
return;
}
var current = $("#gotoPage").val();
current = parseInt(current);
if(current<1) return;
if (current>page_total) {
current = 1;
$("#gotoPage").val('1');
};
page_index=current;
$("#currentIndex").html(page_index);
getDisplayList();
}
function num(d){
if(d>=page_total) return;
page_index = d;
getDisplayList();
}
sql语句:分页查询
<!-- public List<GoodPO> findByPage(@Param("page")int page,@Param("size")int size, @Param("good")GoodPO po); -->
<select id="findByPage" resultType="GoodPO" >
<bind name="num" value="(page-1)*size"></bind>
select * from goodsinfo
<where>
<if test="good.gno!=null">
and gno=#{good.gno}
</if>
<if test="good.gname!=null and good.gname!=''">
and gname=#{good.gname}
</if>
<if test="good.tino!=null">
and tino=#{good.tino}
</if>
</where>
limit #{num},#{size}
</select>
实现类代码:
@Override
public List<GoodPO> findByPage(int page, int size, GoodPO po) {
List<GoodPO> list=new ArrayList<GoodPO>();
list=mapper.findByPage(page, size, po);
if(list!=null) {
return list;
}
return null;
}
controller类:接收前端的数据,去数据库查询最新数据,返回给前端;
@RequestMapping("/findByPage")
@ResponseBody
public List<GoodPO> findByPage(int page, int size, GoodPO po) {
//System.out.println("page:"+page);
//System.out.println("size:"+size);
//System.out.println("po:"+po);
List<GoodPO> list=new ArrayList<GoodPO>();
list=gooodBizImpl.findByPage(page, size, po);
return list;
}