简单的分页，模拟数据，没有封装，显示原理，大家有兴趣可以自己封装，这里只是个原理过程，真正的分页也差不多是这个原理，只是请求数据不太一样，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求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们"}

]

jquery ajax json简单的分页，模拟数据，没有封装，只显示原理的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  3. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  4. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  5. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  6. Jquery+ajax+json+servlet原理和Demo

    Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...

  7. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

  8. jQuery+Ajax+PHP实现异步分页数据显示

    这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...

  9. jQuery ajax从后台取不到数据

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get 关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的. 好吧今天我也遇到了 ...

随机推荐

  1. android 开发 讯飞语音唤醒功能

    场景:进入程序后处于语音唤醒状态,当说到某个关键词的时候打开某个子界面(如:语音识别界面) 技术要点: 1. // 设置唤醒一直保持,直到调用stopListening,传入0则完成一次唤醒后,会话立 ...

  2. JDBC编程步骤

    JDBC编程步骤 加载数据库驱动. 通常使用Class类的forName()静态方法来加载驱动. Class.forName(driverClass) dirverClass: mysql---Cla ...

  3. [工作积累] bitfield

    ISO/IEC 14882:2003: 9.6 Bit-fields [class.bit] A member-declarator of the form identifieropt : const ...

  4. 亚马逊 在线测试题目 amazon （变种的）三叉树的最近公共祖先问题

    题目意思就是找一棵按上面链接所示的树对应的上面的两个点的最小公共祖先(LCP,Least Common Father),按照比较大小来依次返回自己的父亲节点就行了.具体看代码:getfather(a) ...

  5. struts2漏洞原理及解决办法

    1.原理 Struts2的核心是使用的webwork框架,处理action时通过调用底层的getter/setter方法来处理http的参数,它将每个http参数声明为一个ONGL(这里是ONGL的介 ...

  6. 打造XP下可运行的微型PE文件

    前几天和朋友交流技术,提到手工打造微型PE文件,他说现在网上流传的大部分版本在XP SP3下都不能运行,于是心血来潮,拍着胸脯说:“你放心,忙完了帮你做一个.”后来花了半天时间,终于打造出一个XP下可 ...

  7. setTimeout(f, 0)的应用&利用Deferred实现队列运行

    任务:从mongodb中导出csv数据,输出内容如下userid username usergender points points表: { "userid" : 1022, &q ...

  8. IE6下div遮盖select的最优解决方案

    a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...

  9. Chapter 3

    1.序列类型可以使用成员操作符in,大小计算函数(len()),分片([]),都可以迭代.Python内置的序列类型:str,list,tuple,bytearray,bytes.标准库中的序列类型: ...

  10. 企业级Java应用最重要的4个性能指标

    应用性能管理(APM)是一种即时监控以实现对应用程序性能管理和故障管理的系统化解决方案.目前主要指对企业的关键业务应用进行监测.优化,最终达到提高企业应用的可靠性和质量,保证用户得到良好的服务,降低I ...