JS 가 실현 한 간단 한 페이지 기능 예시

10276 단어 JS페이지 를 나누다
본 논문 의 사례 는 JS 가 실현 하 는 간단 한 페이지 기능 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
HTML 부분:

<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user2</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user3</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user4</td><td>25</td><td> </td><td>    </td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>
js 부분:

/**
 *     
 * pno--  
 * psize--       
 *              ，          ，         
 *  js            ，              
 **/
function goPage(pno,psize){
  var itable = document.getElementById("idData");
  var num = itable.rows.length;//      (     )
  console.log(num);
  var totalPage = 0;//   
  var pageSize = psize;//      
  //     
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//    
  var startRow = (currentPage - 1) * pageSize+1;//       31
    var endRow = currentPage * pageSize;//        40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //          
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = " "+num+"     "+totalPage+"     "+currentPage+" ";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">  </a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><   </a>"
  }else{
    tempStr += "  ";
    tempStr += "<   ";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">   ></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">  </a>";
  }else{
    tempStr += "   >";
    tempStr += "  ";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}
전체 테스트 예시:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS  </title>
<script>
/**
 *     
 * pno--  
 * psize--       
 *              ，          ，         
 *  js            ，              
 **/
function goPage(pno,psize){
  var itable = document.getElementById("idData");
  var num = itable.rows.length;//      (     )
  console.log(num);
  var totalPage = 0;//   
  var pageSize = psize;//      
  //     
  if(num/pageSize > parseInt(num/pageSize)){
      totalPage=parseInt(num/pageSize)+1;
    }else{
      totalPage=parseInt(num/pageSize);
    }
  var currentPage = pno;//    
  var startRow = (currentPage - 1) * pageSize+1;//       31
    var endRow = currentPage * pageSize;//        40
    endRow = (endRow > num)? num : endRow;  //40
    console.log(endRow);
    //          
  for(var i=1;i<(num+1);i++){
    var irow = itable.rows[i-1];
    if(i>=startRow && i<=endRow){
      irow.style.display = "block";
    }else{
      irow.style.display = "none";
    }
  }
  var tempStr = " "+num+"     "+totalPage+"     "+currentPage+" ";
  if(currentPage>1){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">  </a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><   </a>"
  }else{
    tempStr += "  ";
    tempStr += "<   ";
  }
  if(currentPage<totalPage){
    tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">   ></a>";
    tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">  </a>";
  }else{
    tempStr += "   >";
    tempStr += "  ";
  }
  document.getElementById("barcon").innerHTML = tempStr;
}
</script>
</head>
<body onLoad="goPage(1,10);">
  <table id="idData" width="70%">
    <tr><td>user1</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user2</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user3</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user4</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user5</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user6</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user7</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user8</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user9</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user10</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user11</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user12</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user13</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user14</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user15</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user16</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user17</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user18</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user19</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user20</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user21</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user22</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user23</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user24</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user25</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user26</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user27</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user28</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user29</td><td>25</td><td> </td><td>    </td></tr>
    <tr><td>user30</td><td>25</td><td> </td><td>    </td></tr>
  </table>
  <table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
  </table>
</body>
</html>
실행 효과 그림:

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다http://tools.jb51.net/code/HtmlJsRun실행 효 과 를 테스트 해 보 세 요.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
Angular angular-file-uproad 파일 에 올 라 온 예제 코드
JavaScript 유 틸 리 티 코드 팁

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage