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">&nbsp;|&nbsp;跳转到第</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;
}