论坛首页 → Web前端技术论坛 →

自己写了个分页的JS 类函数，把它封装好后，测试的过程中，却出现个奇怪的问题！！

浏览 3834 次
锁定老帖子 主题：自己写了个分页的JS 类函数，把它封装好后，测试的过程中，却出现个奇怪的问题！！
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • king6860
  • 等级: 一星会员
  • 性别:
  • 文章: 4
  • 积分: 141
   发表时间：2007-02-12  
首先，我把出错的原因给大家说一下，下面是  测试页面的部分代码，
当我在加入 <form></form> 标签之后， 当点击'GO' 按钮的时候，
就出现了莫名其妙的错误： '对象不支持此属性或方法',
当把 <form></form> 删除以后，就正常了。
这个问题困扰我许久了，希望大家把帮我看一下，到底是哪个地方的代码出现了错误。。。

<!-- <form> -->
<table  width="98%"  border="0" align="center" cellpadding="4" cellspacing="0" class="frame" >
<thead>
<tr>
<td align='center' colspan="" id='page'>
<script>
var url = "/Lottery.do?op=forwardAddPaiLie3";
var page1 = new pageObject(url,1,45,450,"page1");

</script>
</td>
</tr>
</thead>
</table>
<!-- </form> -->


下面是 JS 函数。
// 校验数字
<script>
function checkNumber(obj)
{
var reg = /[1-9]{1}([0-9]*)$/;
return reg.test(obj);
}

function pageObject(url,currentPage,totalPage,recordSize)
{
         // 对象名称
_OBJ_NAME = this;
         // 查询的URL 和QueryString
this.url = url;
         // 当前页
this.currentPage = currentPage;
         // 共多少页
this.totalPage = totalPage;
         // 共多少条记录
this.recordSize = recordSize;
// document.write 的字符串
this.toWrite = "";

         // 初始化函数
this.init = function()
{
if(this.totalPage == 1 && this.currentPage == 1)
{
this.toWrite="(第<font color=blue>"+this.currentPage+"</font>/"+this.totalPage+"页 共"+this.recordSize+"条)";
this.toWrite += "&nbsp;首页&nbsp;上一页&nbsp;下一页&nbsp;末页&nbsp;<input id='forwardPage' size='4' value='' style='ime-mode:disabled;'>&nbsp;<input type='button' value=' GO ' class='button' onclick='"+"_OBJ_NAME.fnForward()'>";
}else if(this.totalPage > 1 && this.currentPage==1)
{
var next = parseInt(this.currentPage)+1;
this.toWrite="(第<font color=blue>"+this.currentPage+"</font>/"+this.totalPage+"页 共"+this.recordSize+"条)";
this.toWrite += "&nbsp;首页&nbsp;上一页&nbsp;<a href='"+this.url+"&_pageNo="+next+"'>下一页</a>";
this.toWrite += "&nbsp;<a href='"+this.url+"&_pageNo="+this.totalPage+"'>末页</a>&nbsp;&nbsp;<input id='forwardPage' size='4' value='' style='ime-mode:disabled;'>&nbsp;<input type='button' value=' GO ' class='button' onclick='"+"_OBJ_NAME.fnForward()'>";
}else if(this.totalPage >1 && this.currentPage != this.totalPage)
{
var next = parseInt(this.currentPage)+1;
var previous = parseInt(this.currentPage)-1;
this.toWrite="(第<font color=blue>"+this.currentPage+"</font>/"+this.totalPage+"页 共"+this.recordSize+"条)";
this.toWrite += "&nbsp;<a href='"+this.url+"&_pageNo=1'>首页</a>&nbsp;<a href='"+this.url+"&_pageNo="+previous+"'>上一页</a>&nbsp;";
this.toWrite += "<a href='"+this.url+"&_pageNo="+next+"'>下一页</a>&nbsp;<a href='"+this.url+"&_pageNo="+this.totalPage+"'>末页</a>";
this.toWrite += "&nbsp;<input id='forwardPage' size='4' value='' style='ime-mode:disabled;'>&nbsp;<input type='button' value=' GO ' class='button' onclick='"+"_OBJ_NAME.fnForward()'>";
}else if(this.totalPage>1 && this.currentPage==this.totalPage)
{
var previous = parseInt(this.currentPage)-1;
this.toWrite="(第<font color=blue>"+this.currentPage+"</font>/"+this.totalPage+"页 共"+this.recordSize+"条)";
this.toWrite += "&nbsp;<a href='"+this.url+"&_pageNo=1'>首页</a>&nbsp;<a href='"+this.url+"&_pageNo="+previous+"'>上一页</a>&nbsp;";
this.toWrite += "下一页&nbsp;末页";
this.toWrite += "&nbsp;<input id='forwardPage' size='4' value='' style='ime-mode:disabled;'>&nbsp;<input type='button' value=' GO ' class='button' onclick='"+"_OBJ_NAME.fnForward()'>";
}
document.getElementById('page').innerHTML = this.toWrite;
};

this.init();
// 跳转函数。
this.fnForward = function()
{
var val = document.getElementById('forwardPage').value;
if(!checkNumber(val))
{
alert('请输入数字！');
document.getElementById('forwardPage').select();
return;
}

if(parseInt(val) > this.totalPage)
{
alert('不能超过最大的页数！');
document.getElementById('forwardPage').value = this.totalPage;
return;
}

location.href = this.url +"&_pageNo="+parseInt(val);
};
}

</script>
返回顶楼
         
  • king6860
  • 等级: 一星会员
  • 性别:
  • 文章: 4
  • 积分: 141
   发表时间：2007-02-12  
构造函数应该是这样：
function pageObject(url,currentPage,totalPage,recordSize,objName)
{
// 对象名称
this._OBJ_NAME = objName;
// 查询的URL 和QueryString
this.url = url;
// 当前页
this.currentPage = currentPage;
// 共多少页
this.totalPage = totalPage;
// 共多少条记录
this.recordSize = recordSize;
// document.write 的字符串
this.toWrite = "";
.....
}

返回顶楼
          回帖地址
0 请登录后投票
  • dengyin2000
  • 等级: 四钻会员
  • 性别:
  • 文章: 1467
  • 积分: 1725
  • 来自: 广州
   发表时间：2007-02-13  
看看我这个， 你把数据获得数据，和填充数据的部分自己改掉就行

js 代码
 
  1. function PostPaginate(pageSize, isCallAllItems, result){  
  2.     if (result)  
  3.     this.result = result;  
  4.     this.totalNum = 0;               // all items' length  
  5.     this.pageSize = 5;               // default value.  
  6.     this.start = 0;                  // start index of items  
  7.     this.end = 0;                    // end index of items  
  8.     this.curPage = 0;                // current page index  
  9.     this.totalPage = 0;              // all page count  
  10.     this.isCallAllItems = isCallAllItems;  
  11.     this.init(0, pageSize, result.itemCount);  
  12. }  
  13.   
  14. // prepay all need data, ie totalNum, start, end .... also it would do something others,  
  15. // fill the data to html page, controll the first, previous, next, last buttons status.  
  16. PostPaginate.prototype.init=function(currentPage, onePageSize, totalNum){  
  17.     window.scroll(0, 0);  
  18.     this.pageSize = onePageSize;  
  19.     this.totalNum = totalNum;  
  20.     this.totalPage = Math.ceil(this.totalNum / this.pageSize);  
  21.           
  22.     if (currentPage >=0){  
  23.         if (currentPage >= Math.ceil(this.totalNum / this.pageSize)){  
  24.             this.curPage = this.totalPage-1;  
  25.         }else{  
  26.             this.curPage = currentPage;  
  27.         }  
  28.     }else{  
  29.         this.curPage = 0;  
  30.     }  
  31.     this.start = this.curPage * this.pageSize;  
  32.     this.end = this.start + this.pageSize;  
  33.     if (this.end > this.totalNum){  
  34.         this.end = this.totalNum;  
  35.     }  
  36.   
  37.       
  38.     // controll buttons  
  39.     this.controllButtonsStatus();  
  40.     // fill html  
  41.     this.fillDataWithCurrentPageItems();  
  42.     //update the description  
  43.     this.fillPaginateDescription();  
  44.       
  45. };  
  46.   
  47. function callbackGetItemsForPaginate(result, exception){  
  48.     if (exception) {  
  49.         showError("An error has occurred: " + exception.message);  
  50.     } else {  
  51.         // escape titles  
  52.         for (var i = 0; i < result.items.length; i++) {  
  53.             var item = result.items[i];  
  54.             if (item.categoryInformation) {  
  55.                 item.categoryInformation.title = dojo.string.escape("html", item.categoryInformation.title);  
  56.             }  
  57.         }  
  58.         pageinate.result = result;  
  59.         pageinate.init(pageinate.curPage, pageinate.pageSize, result.itemCount);  
  60.     }  
  61. }  
  62.   
  63. PostPaginate.prototype.fetchData=function(curPage){  
  64.     if (!checkTreeNodeExisted(selectWhichNode)){  
  65.         alert("Sorry, this feed was previously removed from your feed tree.");  
  66.         return;  
  67.     }  
  68.     if (this.isCallAllItems){  
  69.         this.result = jsonrpc.subscribe.getItems(callbackGetItemsForPaginate, true, selectWhichNode, selectedTime,true, curPage, false, this.totalNum);  
  70.     }else{  
  71.         this.result = jsonrpc.subscribe.getItems(callbackGetItemsForPaginate, false, selectWhichNode, selectedTime,true, curPage, false, this.totalNum);  
  72.     }  
  73. };  
  74.   
  75. PostPaginate.prototype.goFirstPage=function(){  
  76.     if (this.isFirstPage())  
  77.         return ;  
  78.     this.fetchData((this.curPage = 0));  
  79. };  
  80. PostPaginate.prototype.goPreviousPage=function(){  
  81.     if (this.isFirstPage())  
  82.         return ;  
  83.     this.fetchData((this.curPage = this.curPage -1));  
  84. };  
  85. PostPaginate.prototype.goNextPage=function(){  
  86.     if (this.isLastPage())  
  87.         return ;  
  88.         this.fetchData((this.curPage = this.curPage + 1));  
  89. };  
  90. PostPaginate.prototype.goLastPage=function(){  
  91.     if (this.isLastPage())  
  92.         return  ;  
  93.         this.fetchData((this.curPage = this.totalPage - 1));  
  94. };  
  95. PostPaginate.prototype.isFirstPage=function(){  
  96.     return this.curPage <= 0;  
  97. }  
  98. PostPaginate.prototype.isLastPage=function(){  
  99.     return this.curPage >= this.totalPage - 1;  
  100. }  
  101.   
  102. // get current page's item data  
  103. PostPaginate.prototype.getCurrentPageItems=function(){  
  104.     return this.items.slice(this.start, this.end);  
  105. };  
  106. // this function is use for fill you html page with current page items  
  107. PostPaginate.prototype.fillDataWithCurrentPageItems=function(){  
  108.     var content = postsTemplate.process({"items":this.result.items});         
  109.     dojo.byId("selection_output").innerHTML = content;  
  110.     // We will those IMG, whose width are larger than 500 px.  
  111.     preImgsForAdujstWidth();  
  112. };  
  113. PostPaginate.prototype.controllButtonsStatus=function(){  
  114.     var buttons = document.getElementsByName("paginationButtons");  
  115.     if (this.totalPage <= 1){  
  116.         for(var i=0;i<2;i++){  
  117.             buttons[i].style.display = "none";  
  118.         }  
  119.           
  120.     }else{  
  121.         for(var i=0;i<2;i++){  
  122.             buttons[i].style.display = "block";  
  123.         }  
  124.         var firstButtons = document.getElementsByName("paginationFirst");  
  125.         var previousButtons = document.getElementsByName("paginationPrevious");  
  126.         var nextButtons = document.getElementsByName("paginationNext");  
  127.         var lastButtons = document.getElementsByName("paginationLast");  
  128.           
  129.         if (this.isFirstPage()){  
  130.             for(var i=0;i<2;i++){  
  131.                 firstButtons[i].className="gray-button";  
  132.                 previousButtons[i].className="gray-button";       
  133.             }     
  134.         }else{  
  135.             for(var i=0;i<2;i++){  
  136.                 firstButtons[i].className="red-button";  
  137.                 previousButtons[i].className="red-button";        
  138.             }     
  139.         }  
  140.           
  141.         if (this.isLastPage()){  
  142.             for(var i=0;i<2;i++){  
  143.                 nextButtons[i].className="gray-button";  
  144.                 lastButtons[i].className="gray-button";       
  145.             }  
  146.         }else{  
  147.             for(var i=0;i<2;i++){  
  148.                 nextButtons[i].className="red-button";  
  149.                 lastButtons[i].className="red-button";    
  150.             }  
  151.         }  
  152.     }  
  153. }  
  154. // update the description  
  155. PostPaginate.prototype.fillPaginateDescription=function(){  
  156.     var textCs = document.getElementsByName("paginationText");  
  157.     var startIndex = 0;  
  158.     if (this.start <  0)  
  159.         startIndex = 0;  
  160.     else  
  161.         startIndex = this.start + 1;  
  162.     for(var i=0; i<2; i++){  
  163.         textCs[i].innerHTML="Posts <B>" + startIndex + "</B> to <B>" + this.end + "</B> of <B>" + this.totalNum  + "</B>";  
  164.     }  
  165. }  
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics