首先，看一下效果，实用laypage.js实现分页可以实现这种效果：

页面代码： <div class="pageNum" id="laypage">                         <ul>     </ul> </div> [td]

[/td]

  <script type="text/javascript">
        $(function () {
            var queryCid = 5;
            showData(queryCid,1,'');
        });

        function showData(queryCid,queryPageNo,rname) {
            $.post(
              //请求地址
                "route",
           //请求参数
                {action:"findRouteListByCid",cid:queryCid,curPage:queryPageNo,rname:rname},
            //回调函数
                function (resultInfo) {
                    if (resultInfo.flag){
                        var pageBean = resultInfo.data;
                        var dataList = pageBean.dataList;
                        var html = "";
                        for(var i=0;i<dataList.length;i++){
                            var route = dataList;
                            html+="<li>\n" +
                                "                            <div class=\"img\"><img src=\""+route.rimage+"\" width='299px' alt=\"\"></div>\n" +
                                "                            <div class=\"text1\">\n" +
                                "                                <p>"+route.rname+"</p>\n" +
                                "                                <br/>\n" +
                                "                                <p>"+route.routeIntroduce+"</p>\n" +
                                "                            </div>\n" +
                                "                            <div class=\"price\">\n" +
                                "                                <p class=\"price_num\">\n" +
                                "                                    <span>&yen;</span>\n" +
                                "                                    <span>"+route.price+"</span>\n" +
                                "                                    <span>起</span>\n" +
                                "                                </p>\n" +
                                "                                <p><a href=\"route_detail.html?rid="+route.rid+"\">查看详情</a></p>\n" +
                                "                            </div>\n" +
                                "                        </li>"
                        }
                        $(".xinxi .left ul:first").html(html);
                        $(".page_num_inf span:first").html(pageBean.totalPage);
                        $(".page_num_inf span:last").html(pageBean.count);
                        laypage({
                            cont:"laypage", //容器
                            pages:pageBean.totalPage, //总页数
                            curr:pageBean.curPage,//当前页
                            skin:"#ffc900",//设置颜色
                            groups:5,//分页
                            jump:function (obj, first) { //触发分页后的回调
                                if (!first){//first判断是否第1次切换页码，这里只要不是第1次切换就调用分页获取数据函数获取指定页数据
                                    showData(queryCid,obj.curr,rname)
                                }
                            }
                        })
                    }else {
                        alert(resultInfo,errorMsg);
                    }
                },
                "json"
            )
        }
    </script>




[/table][table=50%]

首先，看一下效果，实用laypage.js实现分页可以实现这种效果：

页面代码： <div class="pageNum" id="laypage">                         <ul>     </ul> </div> [td]

[/td]

  <script type="text/javascript">
        $(function () {
            var queryCid = 5;
            showData(queryCid,1,'');
        });

        function showData(queryCid,queryPageNo,rname) {
            $.post(
              //请求地址
                "route",
           //请求参数
                {action:"findRouteListByCid",cid:queryCid,curPage:queryPageNo,rname:rname},
            //回调函数
                function (resultInfo) {
                    if (resultInfo.flag){
                        var pageBean = resultInfo.data;
                        var dataList = pageBean.dataList;
                        var html = "";
                        for(var i=0;i<dataList.length;i++){
                            var route = dataList;
                            html+="<li>\n" +
                                "                            <div class=\"img\"><img src=\""+route.rimage+"\" width='299px' alt=\"\"></div>\n" +
                                "                            <div class=\"text1\">\n" +
                                "                                <p>"+route.rname+"</p>\n" +
                                "                                <br/>\n" +
                                "                                <p>"+route.routeIntroduce+"</p>\n" +
                                "                            </div>\n" +
                                "                            <div class=\"price\">\n" +
                                "                                <p class=\"price_num\">\n" +
                                "                                    <span>&yen;</span>\n" +
                                "                                    <span>"+route.price+"</span>\n" +
                                "                                    <span>起</span>\n" +
                                "                                </p>\n" +
                                "                                <p><a href=\"route_detail.html?rid="+route.rid+"\">查看详情</a></p>\n" +
                                "                            </div>\n" +
                                "                        </li>"
                        }
                        $(".xinxi .left ul:first").html(html);
                        $(".page_num_inf span:first").html(pageBean.totalPage);
                        $(".page_num_inf span:last").html(pageBean.count);
                        laypage({
                            cont:"laypage", //容器
                            pages:pageBean.totalPage, //总页数
                            curr:pageBean.curPage,//当前页
                            skin:"#ffc900",//设置颜色
                            groups:5,//分页
                            jump:function (obj, first) { //触发分页后的回调
                                if (!first){//first判断是否第1次切换页码，这里只要不是第1次切换就调用分页获取数据函数获取指定页数据
                                    showData(queryCid,obj.curr,rname)
                                }
                            }
                        })
                    }else {
                        alert(resultInfo,errorMsg);
                    }
                },
                "json"
            )
        }
    </script>




[/table][table=50%]