最新作了一個網站,能夠動態顯示一些圖片,包括控制這些記錄的上一頁、下一頁及第幾頁數據,固然也用了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>