一个js展示数据的包突然不能翻页了，如果翻页div就会消失，求助……

js展示数据的这个功能前几天突然出了问题，表现点击下一页或者上一页等会翻页，但是翻页之后展示数据的显示会全部消失。但是如果是填写页数则不会有问题，查了一段时间感觉很纠结部分页面代码（红色代码喂展示代码填充的位置）<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<f:view locale="#{usersBean.locale}">
<head>
<title>unime--发传真</title>
<meta http-equiv="keywords" content="enter,your,keywords,here" />
<meta http-equiv="description" content="A short description of this page." />
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../styles/dataTable.css" />
<link rel="stylesheet" type="text/css" href="../styles/Base.css" />
<link rel="stylesheet" type="text/css" href="../styles/Generic.css" />
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict();var action = "#{param.action}";
   var type= "#{param.type}";var forwardGid= "#{param.gid}";</script>
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<!-- 此处是dwr的yinyong -->
<script type="text/javascript" src="../scripts/ExtendFun.js"></script>
<script type="text/javascript" src="../scripts/WebApp.GroupsPager.js"></script>
<script type="text/javascript" src="../scripts/fax/WriteFax.js"></script>
<script type="text/javascript" src="../scripts/showPanel.js"></script></head>
<body >
<f:loadBundle basename="com.webapp.resource.WebAppResource"var="resource" />
<h:form id="fromUpload" enctype="multipart/form-data"onsubmit="startProgress()">
<table  cellspacing="1" cellpadding="0" width="85%" align="left" border="0"><!-- style="line-height: 0px;" -->
<tr bgcolor="">
<td height="60px" valign="middle" bgcolor="" id="100%">
<div id="dvLinkManContent" style="display: none;padding-left:10px;">
<div style="overflow:auto;height: 18px;float:left;padding-left:10px;padding-top:2px;width: 73%;">
<a href="javascript:deleteCurrMan();">删除选中</a>
<a href="javascript:deleteAllCurrMan();">全部删除</a>
</div>
<table id="currLinkMan" width="73%" border="0" cellpadding="0"  cellspacing="0" style="" 
<tbody id="Listbody">
</tbody>
</table>
<div class="x-toolbar x-small-editor" id="dvPager" style="width: 73%;overflow:auto; "/>
</div>
</td>
</tr>
</table>
</h:form>
</body>
</f:view>
</html>
展示数据js代码function GoPage(pageIndex) {
startRow = pageSize * (pageIndex - 1);
var count = 0;
var headerData = [{len:5,id:'gid' , type:'类型', receiver:'接收人', receiverNumber:'接收号
 码',receiverCompany:'公司名',noticeEmailAddress:'邮件通知地址',noticeSmsNumber:'短信通知号码'}];
var cellFuncs = [function (data) {
return "<input name=\"ckb_Select\" id=\"ckb_Select\" onclick=\"WebApp.GroupsPager.selCheck(this);\" type=\"checkbox\" class=\"standardTable_Column_ChkBox\" value=\"" + data.gid + "\"/>";
}, function (data) {
if(isNull(data.type)){
return space;
}else{
if(data.type==1){
return "外发";
}else{
return "转发";
}
}
}, function (data) {
if(isNull(data.receiver)){
return space;
}else{
return data.receiver;
}
}, function (data) {
if(isNull(data.receiverNumber)){
return space;
}else{
return data.receiverNumber;
}
}, function (data) {
if(isNull(data.receiverCompany)){
return space;
}else{
return data.receiverCompany;
}
}, function (data) {
if(isNull(data.noticeEmailAddress)){
return space;
}else{
return data.noticeEmailAddress;
}
}, function (data) {
if(isNull(data.noticeSmsNumber)){
return space;
}else{
return data.noticeSmsNumber;
}
}];
var cellFuncsHeader = [function (data) {
return randTitleCell(data.gid,true);
}, function (data) {
return randTitleCell(data.type,false);
}, function (data) {
return randTitleCell(data.receiver,false);
}, function (data) {
return randTitleCell(data.receiverNumber,false);
}, function (data) {
return randTitleCell(data.receiverCompany,false);
}, function (data) {
return randTitleCell(data.noticeEmailAddress,false);
}, function (data) {
return randTitleCell(data.noticeSmsNumber,false);
}];
var sumCount = 0;
DwrReceiverLinkMan.getCount(function (icount) {
DwrReceiverLinkMan.getReceiverList(startRow, pageSize, function (dataList) {
if(icount<1){
showLinkMan(false);
}else{
showLinkMan(true);
WebApp.GroupsPager.dataTable(null,dataList, icount, pageIndex,
                                        cellFuncs,headerData,cellFuncsHeader,false);
}
});
});

}

解决方案 »

  1.   

    js展示数据包代码（红色代码处报错）var pageSize = 8;
    var WebApp = function () {
    };
    WebApp.GroupsPager = WebApp.prototype = {tbody:"Listbody", barName:"dvPager", isDisabled:function () {
    return "x-btn-wrap x-btn x-btn-icon x-item-disabled";
    },isNotDisabled:function () {
    return "x-btn-wrap x-btn x-btn-icon";
    },<!--这里是展示数据的时候调用的方法-->dataTable:function (arrGroupTitle,dataList, icount, pageIndex, cellFuncs,headerData,cellFuncsHeader,isGroup) {
    DWRUtil.setEscapeHtml(false);
    dwr.util.removeAllRows(this.tbody);

    //Create Header
    DWRUtil.addRows(this.tbody, headerData, cellFuncsHeader, {rowCreator:function (options) {
    var row = document.createElement("tr");
    return row;
    }, cellCreator:function (options) {
    var cell = document.createElement("th");
    if (options.cellNum == 0) {
    cell.setAttribute("width", "20");
    cell.className = "standardTable_Header";
    } else {
    cell.className = "standardTable_Header_Left";
    }
    return cell;
    }});/* tbodyObj=document.createElement("tbody");
    trObj=document.createElement("tr");
    tdObj=document.createElement("td");
    tdObj.colSpan=headerData[0].len;
    trObj.appendChild(tdObj);
    tableObj=document.createElement("table");
    tableObj.style.width="100%";
    tableObj.style.height="100px";
    tableObj.appendChild(tbodyObj);
    //tbodyObj.appendChild(newChild);
    dvObj=document.createElement("div");
    dvObj.className="dvOverFlow";
    dvObj.appendChild(tableObj);
    tdObj.appendChild(dvObj);
    $(this.tbody).appendChild(trObj);*/



    var space = "<img src=\"../images/s.gif\">";
    var GroupcellFuncs = [function (data){
    return "<img id=\""+data.imgID+"\" src=\"../images/elbow-minus-nl.gif\" width=\"16\" height=\"18\" align=\"absmiddle\">"+space+space+data.name;
    }];
    if(dataList!=",," && dataList!="" && dataList!=null){
    if(isGroup){//grouping
    try{
    //setTimeout(function(dataList){alert(dataList);
    //for(s=0;s<dataList.length;s++){
    var s=0;
    while(dataList!=",," && !isNull(dataList) && isArray(dataList)&& s<dataList.length){
    if(!isNull(dataList[s])){
    var tbodyName = "tbodyGroup"+s;
    var tbodyTitleName = "tbodyGroupTitle"+s;
    var imgID = "imgTree"+s;
    //create group title
    var titletbody = document.createElement("tbody");
    titletbody.setAttribute("id", tbodyTitleName);
    titletbody.colSpan= headerData[0].len;
    $(this.tbody).appendChild(titletbody);

    DWRUtil.addRows(tbodyTitleName, [{"name":arrGroupTitle
      [s],"imgID":imgID,"tbodyName":tbodyName}], GroupcellFuncs, {rowCreator:function (options) {
    var rowTitle = document.createElement("tr");
    //alert(dwr.util.toDescriptiveString(options,2));
    rowTitle.onclick=function(){
    var currbody = $(options.rowData.tbodyName);
    if(currbody.style.display=="none"){
    currbody.style.display="";
    $(options.rowData.imgID).src="../images/elbow-minus-nl.gif";
    }else{
    currbody.style.display="none";
    $(options.rowData.imgID).src="../images/elbow-plus-nl.gif";
    }
    }
    return rowTitle;
    }, cellCreator:function (options) {
    var cellTitle = document.createElement("td");
    cellTitle.colSpan= headerData[0].len;
    cellTitle.className = "dataTableRowGroup treeHeader";
    return cellTitle;
    }});

    var subtbody = document.createElement("tbody");
    subtbody.setAttribute("id", tbodyName);
    $(this.tbody).appendChild(subtbody);
    //end group title
    //create group content
    DWRUtil.addRows(tbodyName, dataList[s], cellFuncs, {rowCreator:function (options) {
    var rowContent = document.createElement("tr");
    return rowContent;
    }, cellCreator:function (options) {
    var cellContent = document.createElement("td");
    if (options.cellNum == 0) {
    cellContent.setAttribute("width", "20");
    cellContent.className = "dataTableRow_First_Cell";
    } else {
    cellContent.className = "dataTableRow";
    }
    return cellContent;
    }});
    //end group content
    }
    s+=1;
    }//end while
    //},200);
    }catch(e){
    alert(e);
    }
    }else{//not grouping
    //create group content
    DWRUtil.addRows(this.tbody, dataList, cellFuncs, {rowCreator:function (options) {
    var row = document.createElement("tr");
    row.setAttribute("id", "tr" + options.rowIndex);
    return row;
    }, cellCreator:function (options) {
    var cell = document.createElement("td");
    if (options.cellNum == 0) {
    cell.className = "dataTableRow_First_Cell";
    } else {
    cell.className = "dataTableRow";
    }
    return cell;
    }});
    //end group content
    }
    }else{//dataList is null
    var divEmpty = document.createElement("div");
    divEmpty.setAttribute("id", "divEmpty");
    divEmpty.className = "divEmpty";
    divEmpty.innerHTML="没有任何数据";
    var row = document.createElement("tr");
    row.style.height="200px";
    var cell = document.createElement("td");
    cell.appendChild(divEmpty);
    cell.setAttribute("colSpan", headerData[0].len);
    row.appendChild(cell);
    $(this.tbody).appendChild(row); }
    WebApp.GroupsPager.dataScroller(icount, pageIndex);
    }, dataScroller:function (icount, intpage) {
    var isDisabled = this.isDisabled();
    var isNotDisabled = this.isNotDisabled();
    pagecount = icount % pageSize == 0 ? parseInt(icount / pageSize) : parseInt((icount / pageSize) + 1);
    var btnFirst = this.btnPager((intpage == 1 ? isDisabled : isNotDisabled), "x-btn-text x-tbar-page-first", "First Page", 1);
    var btnPrevious = this.btnPager((intpage > 1 ? isNotDisabled : isDisabled), "x-btn-text x-tbar-page-prev", "Previous Page", ((intpage - 1) < 1 ? 0 : (intpage - 1)));
    var btnNext = this.btnPager(((icount != 0 && intpage < pagecount) ? isNotDisabled : isDisabled), "x-btn-text x-tbar-page-next", "Next Page", ((intpage + 1) > pagecount ? 0 : (intpage + 1)));
    var btnLast = this.btnPager(((icount != 0 && intpage < pagecount) ? isNotDisabled : isDisabled), "x-btn-text x-tbar-page-last", "Last Page", pagecount);
    var btnRefresh = this.btnPager(((icount != 0) ? isNotDisabled : isDisabled), "x-btn-text x-tbar-loading", "Refresh", intpage);
    var endRow = ((startRow + pageSize) > icount) ? icount : (startRow + pageSize);
    var strPager = " <table cellSpacing=\"0\"><tbody>" + "<tr>" + "<td>" + btnFirst + "</td>" + "<td>" + btnPrevious + "</td>" + "<td><span class=\"ytb-sep\"></span></td>" + "<td><span class=\"ytb-text\">Page</span></td>" + "<td><input  onKeyPress=\"event.returnValue=goToPage(" + pagecount + ");\" name=\"txtiPage\" class=\"x-tbar-page-number\" id=\"txtiPage\" style=\"height: 16px\" value=\"" + intpage + "\" size=\"3\"></td>" + "<td><span class=\"ytb-text\">of " + pagecount + "</span></td>" + "<td><span class=\"ytb-sep\"></span></td>" + "<td>" + btnNext + "</td>" + "<td>" + btnLast + "</td>" + "<td><span class=\"ytb-sep\"></span></td>" + "<td>" + btnRefresh + "</td>" + "</tr>" + "</tbody></table>" + "<div class=\"x-paging-info\" id=\"layer\"> " + startRow + " - " + endRow + " of " + icount + "</div>";
    <!--这一步之前的时候已经展示了翻页的数据-->dwr.util.setValue(this.barName, strPager);
    }, <!--这部分是构建按钮功能-->btnPager:function (disabled, classname, tips, iPage) {
    var click = (iPage != 0) ? "onclick=\"GoPage(" + iPage + ")\"" : "";
    var strHtml = "<table class=\"" + disabled + "\"  style=\"widht: auto\" disabled=\"disabled\" cellSpacing=\"0\" cellPadding=\"0\" border=\"0\">" + "<tbody><tr><td class=\"x-btn-left\"><i>&nbsp;</i></td><td class=\"x-btn-center\"><em unselectable=\"on\">" + "<button " + click + " title=\"" + tips + "\" class=\"" + classname + "\">&nbsp;</button>" + "</em></td><td class=\"x-btn-right\"><i>&nbsp;</i></td></tr></tbody>" + "</table>";
    return strHtml;
    },     goToPage:function goToPage(maxPage) {
    if ((event.keyCode != 13) && (event.keyCode != 10)) {
    return ((event.keyCode >= 48) && (event.keyCode <= 57));
    } else {
    var iPage = dwr.util.getValue("txtiPage");
    if (iPage < 1) {
    iPage = 1;
    }
    if (iPage > maxPage) {
    iPage = maxPage;
    }
    GoPage(iPage);
    }
    }
      

  2.   

    展示出来的分页数据是在执行一下代码之后消失的：dwr.util.setValue(this.barName, strPager)（js组件中的代码）
      

  3.   

    补充一下，在ie7内核木有问题，就是在ie8上不行，怀疑和浏览器兼容性有关系
      

  4.   

    dwr.util.setValue(this.barName, strPager) 是向this.barName的标签赋值strPager