jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

简单的分页，模拟数据，没有封装，显示原理，大家有兴趣可以自己封装，这里只是个原理过程，真正的分页也差不多是这个原理，只是请求数据不太一样，html部分：

<!TOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>简单的分页，模拟数据，没有封装，显示原理</title>
    </head>
    <body>
        <div class="box">
            <ul>
            </ul>
        </div>
        <p><input class="btn" type="button" value="加载.." /></p>
        <span style="cursor:pointer;margin-right:10px;" class="prev">上一页</span>
        <span style="cursor:pointer;margin-right:10px;" class="first">第一页</span>
        <span style="cursor:pointer;margin-right:10px;" class="last">最后一页</span>
        <span style="cursor:pointer;margin-right:10px;" class="next">下一页</span>
        <script type="text/javascript" src="../jquery1.7.1.js"></script>
        <script type="text/javascript">
            ;(function($){
                var num = 5;//每页显示的个数
                var n = 0;
                var m = -num;
                function ajax(pageType){
                    var oul = $(".box").find("ul");
                    var ohtml = "";
                    $.ajax({
                        type:"get",
                        url:"myjson.json",
                        dataType:"json",
                        success:function(data){
                            $(oul).empty();
                            if(n < data.length && pageType=="next"){ //上一页
                                n += num;
                                m += num;
                            }else if(m > 0 && pageType=="prev"){ //下一页
                                n -= num;
                                m -= num;
                            }else if(pageType=="first"){ //第一页
                                n = num;
                                m = 0;
                            }else if(pageType=="last"){ //最后一页
                                n = data.length+(data.length%num)-1;
                                m = data.length+(data.length%num)-6;
                            }
                            $.each(data,function(i,val){
                                if(i>=m && i<n){
                                    ohtml += "<li>" + val['news'] + "</li>";
                                }
                            });
                            $(".box").find("ul").html(ohtml);
                        }
                    });
                };
                $(".next").click(function(){
                    ajax("next");
                });
                $(".prev").click(function(){
                    ajax("prev");
                });
                $(".first").click(function(){
                    ajax("first");
                });
                $(".last").click(function(){
                    ajax("last");
                });
                $(function(){ //初始化
                    ajax("next");
                });
            }(jQuery));
        </script>
    </body>
</html>

json部分：

[
    {"news":"1求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"2求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"3求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"4求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"5求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"6求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"7求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"8求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"9求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"10求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"11求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"12求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"13求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"14求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"15求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"16求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"17求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"},
    {"news":"18求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}
]

posted on 2013-08-22 15:18 ゞ╃漃瘼青賰阅读(4863) 评论(1) 编辑收藏举报