jquery實現「上一頁、下一頁及第一頁」操做的無刷算法

最新作了一個網站,能夠動態顯示一些圖片,包括控制這些記錄的上一頁、下一頁及第幾頁數據,固然也用了jquery的post方法實現了沒法新獲取服務器數據。post我本身封裝了一下,封裝的代碼見?,如下爲大體算法,而且會不斷優化。javascript

 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>
相關文章
相關標籤/搜索