万恶的老板为了提高网站中广告的访问流量,决定将文章的展示制作成分页显示形式,无奸不商,不多说了,直接进入主题吧

需求:将文章按照一定的规则进行分页展示.非局部刷新的意思就是点击下一页或者指定的页码,页面会重新刷新一次,这样就相当于页面中的所以内容都会重新刷新一次(主要针对页面中嵌入发广告)

原来是这样展示的:

　　　　

现在要求这样显示:

　　　　

思路:两种,一种是后台java通过jsoup实现,另外一种就是使用jquery来实现,这里我决定使用jquery来实现.

　　使用jquery实现思路:由于文章是由n多p标签组成,所以,可以通过p标签来控制分页,比如,每页显示5个p标签或者每页显示10个p标签

　　第一步:页面中的处理(关键)

<script type="text/javascript">
        $(document).ready(function(){
            var html = $('#content_orig').val();//文章内容html代码.由n多标签组成
            var el = $(html).find('p');         //获取html中的p标签,并统计出p标签的个数
            var number_of_items = el.length;
            console.log(number_of_items);　　　　//向浏览器控制台打印p标签个数,便于测试
            var show_per_page = 5;//每页显示的p标签个数
            var number_of_pages = Math.ceil(number_of_items/show_per_page);;//总的页数,这里使用到jquery中的一个数学函数,ceil(),表示向上取整.
            var current_page = $!page_num;     //从后台接收到的当前页码值(稍后会详细接受这个值存在的意义)首页接受展示后台数据本系统使用的velocity模板
            var previous_page = (current_page == 1 ? 1 : current_page - 1);//上一页的页码值,如果当前页码为1,则上一页的值为1,否则上一页的值为当前页码值减1
            var next_page = (current_page == number_of_pages ? number_of_pages : current_page + 1);//下一页值的处理
            var navigation_html = '';//分页栏html代码的动态生成
            if(current_page > 1){
　　　　　　　　　　//                                                 localhost/xinqi/58144_1.html这个链接就是发往后台的
                navigation_html += '<a class="previous_link" href="/$!channel.alias/$!content.id' + '_' + previous_page + '.html">上一页</a>';
            }else{
                navigation_html += '<span class="disabled">上一页</span>';
            }

            var current_link = 0;
            while(number_of_pages > current_link){
　　　　　　　　　　//动态的生成的页码值添加链接,中间的三元运算是样式的选择,点击当前页码,该页码值会变颜色   <a class="page_link active_page " href="/xinqi/58144_1.html">1</a>   (第一页时的效果)
                navigation_html += '<a class="page_link ' + ( current_link + 1 == current_page ? "active_page" : "") + ' " href="/$!channel.alias/$!content.id' + '_'+ (current_link+1) + '.html">'+ (current_link + 1) + '</a>';
                current_link++;//将所有的页码全部自动生成出来
                //console.log(current_link);
            }

            if(current_page < number_of_pages){
                navigation_html += '<a class="next_link" href="/$!channel.alias/$!content.id' + '_' + next_page + '.html">下一页</a>';
            }else{
　　　　　　　　　　//此处为什么会选择使用span作为下一页的标签呢?原因在于,当点击到最后一页是,下一页的样式将变成不能点击的状态.而a标签没有此属性,这里这样做,也是出于无奈!!!!,上一页的处理也是如此
                navigation_html += '<span class="disabled">下一页</span>';
            }
　　　　　　//此jquery方法是整个分页的核心算法
            function show_content(pageNum){
                pageNum--;
                $('.contentText').html("");
                for(var i= pageNum*5;i<(pageNum+1)*5;i++){
                    if(el.size()<i){
                        break;
                    }
                    $('.contentText').append(el.get(i));
                }
                $('.contentText').append("<div id='page_navigation'></div><br>");
                $('#page_navigation').html(navigation_html);
            }
　　　　　　//下面是一些有关图片路径相关的处理,与本功能无关,看的时候,可以忽略掉这些
            el.find('img').each(function(){
                var image_url;
                console.log($(this).attr('src'));
                if($(this).attr('src').indexOf('http://www.qianqu.cc')>=0){
                     image_url= $(this).attr('src').replace("http://www.qianqu.cc","http://image.qianqu.cc");
                }else
                {
                    image_url= 'http://image.qianqu.cc' + $(this).attr('src');
                }
                $(this).attr('src',image_url);
            });
            show_content(current_page);

        });
    </script>

****************后台只需要简单配合一下页面即可***************************

后台只需要做的就是接受到a标签中的href属性的http://localhost/xinqi/58144_3.html的/58144_3.html值即可,其中58144是该文章的id,3代表当前页面值,当点击相应页码后,后台都会接受他,后台需要做的就是讲这个58144_3html的58144这个id通过字符串的相关方法获取到,然后通过获取的id进行数据库查询,另外需要将这个当前页面的值,通过springmvc返回到页面中,方便页面获取(切记,当前页码值是计算页面中计算分页数据重要的参数,必须返回);

　　这样便大功告成.......