zoukankan      html  css  js  c++  java
  • jquery实现“上一页、下一页及第一页”操作的无刷算法

    最新做了一个网站,可以动态显示一些图片,包括控制这些记录的上一页、下一页及第几页数据,当然也用了jquery的post方法实现了无法新获取服务器数据。post我自己封装了一下,封装的代码见?,以下为大致算法,并且会不断优化。

     1 <script type="text/jscript" language="javascript">
     2 
     3     window.onload = function () {
     4 
     5         ds = new DataStore('<%=ResponseDs.ToString()%>');
     6         var PageCount = parseInt(ds.Defines("PageCount").GetValue());
     7 
     8         //初始化分页控件,这是一个下拉控件,并对每个option设置第几页和第几条数据
     9         for (var i = 1, dtNo = 0 ; i <= PageCount; i++, dtNo += RecCount) {
    10             $("#btnSelect").append("<option value='" + dtNo + "'>" + i + "/" + PageCount + "</option>");
    11         }
    12 
    13         //初始化页面时获取第一页数据,也就是从第0条开始取数据
    14         GetInfoData("Next");
    15     }
    16 
    17     var DataNo = 0; //当前第几条数据
    18     var LastNo = 0; //获取服务器数据后为第几条数据
    19     var HasMore = "T"; //是否还有更多的数据
    20     var RecCount = 10; //每页显示多少数据
    21 
    22     //参数说明:opr="Next"为下一页,"Pre"为上一页
    23     function GetInfoData(opr) {
    24 
    25         if (opr == "Next")
    26             DataNo = LastNo;
    27         if (opr == "Pre")
    28             DataNo -= RecCount;
    29 
    30         //设置分页下拉控件当前第几页
    31         $("#btnSelect option[value=" + DataNo + "]").attr("selected", "selected");
    32 
    33         //设置上一页和下一页按钮是否显示
    34         if (DataNo == 0)
    35             $("#btnPre").css("display", "none");
    36         else
    37             $("#btnPre").css("display", "");
    38 
    39         //提交服务器,returnDS为服务器返回值
    40         var noDe = new DataDefine("DataNo", DataNo);
    41         Submit.Post("GetInfoData", function (rds) {
    42             var returnDS = new DataStore(rds);
    43             
    44             HasMore = returnDS.Defines("HasMore").GetValue();
    45             if (HasMore == "F")
    46                 $("#btnNext").css("display", "none");
    47             else
    48                 $("#btnNext").css("display", "");
    49 
    50             var dl = returnDS.Lists("InfoData");
    51             var count = dl.GetItemCount();
    52             LastNo = DataNo + RecCount;
    53 
    54             var ListHtml = ""
    55             dl.Foreach(function (i, di) {
    56                 //将记录数据记录取出,画出html
    57             });
    58             $("#InfoList").html(ListHtml);
    59 
    60         }, noDe);
    61     }
    62 
    63     //分页下拉控件的onchange事件调用,跳到指定页面
    64     function JumpPage() {
    65         DataNo = parseInt($("#btnSelect").val());
    66         LastNo = parseInt($("#btnSelect").val());
    67         GetInfoData("Next");
    68     }
    69 
    70 
    71 </script>
  • 相关阅读:
    大道至简——一个例子讲清楚观察者模式
    博客园界面代码风格自定义设置
    前端资源网址大集合
    如何检测浏览器是否安装了Adblock,uBlock Origin,Adguard,uBlock等广告屏蔽插件
    WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
    js中+号的另外一种用法
    C++ 最简单的日志类
    树莓派入门(3)—— 基本配置
    树莓派入门(2)——安装系统
    树莓派入门(1)——准备工作
  • 原文地址:https://www.cnblogs.com/foreveryu/p/4583015.html
Copyright © 2011-2022 走看看