日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

js實(shí)現(xiàn)分頁的幾個(gè)源碼，看完基本就懂了

 青_春 2016-05-13

第一種：
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>addUser.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">


  <script type="text/javascript" src="../js/wpCalendar.js">
</script>

 </head>

 <body>
  <div align="center">
   <h1>
    顯示有的用戶界面
   </h1>

   <div
    style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%">

    <table border="1px" cellpadding="0" cellspacing="0" id="tusers">
     <thead>
      <tr>
       <th>
        <input type="checkbox" name="chbk" id="chbk1" />
       </th>
       <th>
        名稱
       </th>
       <th>
        性別
       </th>
       <th>
        郵箱
       </th>
       <th>
        出生日期
       </th>
       <th>
        操作
       </th>
      </tr>
     </thead>

     <tbody id="users">

     </tbody>

    </table>

    <div id="pages">

    </div>
   </div>

   <div style="border: 1px blue solid;">
    <form>
     <table id="divs">
      <tbody id="addUsers">
       <tr>
        <td>
         用戶名:
        </td>
        <td>
         <input type="text" name="name" id="name" />
        </td>
       </tr>
       <tr>
        <td>
         性別:
        </td>
        <td>
         <select id="sex">
          <option value="男">
           男
          </option>
          <option value="女">
           女
          </option>
         </select>
        </td>
       </tr>

       <tr>
        <td>
         郵箱:
        </td>
        <td>
         <input type="text" name="email" id="email" />
        </td>
       </tr>
       <tr>
        <td>
         出生日期:
        </td>
        <td>
         <input type="text" id="bir" name="bir" />
         <input type=button value="點(diǎn)擊看我"
          onclick="showCalendar(this,document.all.bir)">
        </td>
       </tr>

       <tr id="addu">
        <td colspan="2">
         <input type="button" value="添加" onclick="addUser()" id="add" />
        </td>
       </tr>

       <tr id="addu1">
        <td colspan="2">
         <input type="button" value="修改" id="upduser" />
        </td>
       </tr>
      </tbody>
     </table>
    </form>
   </div>
  </div>
 </body>
</html>


<script>
window.onload = function() {
 document.getElementByIdx_x("addu1").style.display = "none";

}

function addUser() {
 var name = document.getElementByIdx_x("name").value;
 var sex = document.getElementByIdx_x("sex").value;
 var email = document.getElementByIdx_x("email").value;
 var bir = document.getElementByIdx_x("bir").value;

 //獲取表格節(jié)點(diǎn)對(duì)象
 var tusers = document.getElementByIdx_x("tusers");

 //創(chuàng)建行
 var tr1 = document.createElement_x("tr");
 var cbk = document.createElement_x("td");
 var tname = document.createElement_x("td");
 var tsex = document.createElement_x("td");
 var temail = document.createElement_x("td");
 var tbir = document.createElement_x("td");
 var toper = document.createElement_x("td");

 var cbk1 = document.createElement_x("input");
 cbk1.setAttribute("type", "checkbox");
 cbk1.setAttribute("name", "chbk");

 cbk.appendChild(cbk1);
 tname.appendChild(document.createTextNode(name));
 tsex.appendChild(document.createTextNode(sex));
 temail.appendChild(document.createTextNode(email));
 tbir.appendChild(document.createTextNode(bir));
 var adelete = document.createElement_x("a");
 var aupdate = document.createElement_x("a");

 adelete.setAttribute("href", "#");
 aupdate.setAttribute("href", "#");

 adelete.appendChild(document.createTextNode("刪除 |"));
 aupdate.appendChild(document.createTextNode("修改"));
 toper.appendChild(adelete);
 toper.appendChild(aupdate)

 //往行中添加
 tr1.appendChild(cbk);
 tr1.appendChild(tname);
 tr1.appendChild(tsex);
 tr1.appendChild(temail);
 tr1.appendChild(tbir);
 tr1.appendChild(toper);

 var users = document.getElementByIdx_x("users");
 users.appendChild(tr1);
 tusers.appendChild(users);

 //刪除操作
 adelete.onclick = function() {
  users.removeChild(adelete.parentNode.parentNode);
 }

 //修改操作
 aupdate.onclick = function() {
  document.getElementByIdx_x("addu").style.display = "none";
  document.getElementByIdx_x("addu1").style.display = "block";

  var utr = aupdate.parentNode.parentNode;
  var utrs = utr.childNodes;

  document.getElementByIdx_x("name").value = utrs[1].innerHTML;
  document.getElementByIdx_x("sex").value = utrs[2].innerHTML;
  document.getElementByIdx_x("email").value = utrs[3].innerHTML;
  document.getElementByIdx_x("bir").value = utrs[4].innerHTML;

  var upUser = document.getElementByIdx_x("upduser");

  upUser.onclick = function() {
   utr.childNodes[1].innerHTML = document.getElementByIdx_x("name").value;
   utr.childNodes[2].innerHTML = document.getElementByIdx_x("sex").value;
   utr.childNodes[3].innerHTML = document.getElementByIdx_x("email").value
   utr.childNodes[4].innerHTML = document.getElementByIdx_x("bir").value
   document.getElementByIdx_x("addu1").style.display = "none";
   document.getElementByIdx_x("addu").style.display = "block";
  }

 }

 //當(dāng)添加用戶的時(shí)候調(diào)用分頁技術(shù)
 testPage()
}

//定義分頁標(biāo)簽節(jié)點(diǎn)對(duì)象并創(chuàng)建
var indexPage = document.createElement_x("a");
var upPage = document.createElement_x("a");
var downPage = document.createElement_x("a");
var endPage = document.createElement_x("a");
var nowpage = 1;

//分頁技術(shù)的實(shí)現(xiàn)
function testPage() {
 var tbodyUsers = document.getElementByIdx_x("users");
 var trUsers = tbodyUsers.getElementsByTagName_r("tr");
 //獲取總記錄數(shù)
 var countRecord = trUsers.length;
 //每頁顯示的記錄數(shù)
 var PAGESIZE = 2;
 //總頁數(shù)
 var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
   : Math.ceil(countRecord / PAGESIZE));
 //當(dāng)前頁信息
 // =======>從那條記錄開始 (nowpage-1)*PAGESIZE;
 //var nowpage = countPage;

 //獲取創(chuàng)建分頁標(biāo)簽的節(jié)點(diǎn)對(duì)象
 var pages = document.getElementByIdx_x("pages");
 //如果沒有創(chuàng)建分頁標(biāo)簽的節(jié)點(diǎn)則創(chuàng)建節(jié)點(diǎn)對(duì)象
 if (!pages.hasChildNodes()) {
  getPages(nowpage);
 }

 //當(dāng)點(diǎn)擊首頁時(shí)的操作
 indexPage.onclick = function() {
  nowpage = 1;
  //顯示首頁的記錄
  indexPageInfo(countRecord, trUsers);

 }
 //當(dāng)點(diǎn)擊上一頁的操作
 upPage.onclick = function() {
  if (nowpage - 1 > 1) {
   nowpage -= 1;
  } else {
   nowpage = 1;
   indexPageInfo(countRecord, trUsers);
  }

  //顯示上一頁記錄
  var startindex = (nowpage - 1) * PAGESIZE;
  alert(startindex + "====================++++++");
  var endindex = startindex + PAGESIZE;

  PageInfo(startindex, endindex, countRecord, trUsers)
 }
 //當(dāng)點(diǎn)擊下一頁的操作
 downPage.onclick = function() {

  if (nowpage + 1 >= countPage) {
   nowpage = countPage;
  } else {
   nowpage += 1;
  }
  alert(nowpage + "-----------------");

  //顯示上一頁記錄
  var startindex = (nowpage - 1) * PAGESIZE;
  alert(startindex + "====================++++++");
  var endindex = startindex + PAGESIZE;
  alert(startindex + "-----" + endindex + "---");
  PageInfo(startindex, endindex, countRecord, trUsers)
 }
 //當(dāng)點(diǎn)擊最后一頁的操作
 endPage.onclick = function() {
  nowpage = countPage;
  if (nowpage > 1) {
   var startindex = (nowpage-1)*PAGESIZE;
   for ( var i = 0; i < countRecord; i++) {
    if (i < startindex) {
     trUsers[i].style.display = "none";
    } else {
     trUsers[i].style.display = "block";
    }

   }

 

第二種：
<script language="JavaScript">

var totalRecordNum = <%=totalRecordNum%>;//總記錄條數(shù)(從java程序中獲取)
var currentPageNumber = 1;//當(dāng)前頁號(hào)
if(totalRecordNum==0)
{
 currentPageNumber = 0;
}
var perPageRecordNum = 5;//每頁記錄條數(shù)(js中設(shè)置)
//計(jì)算總頁數(shù)
var totalPageNumber = Math.ceil(totalRecordNum/perPageRecordNum);
var startShowPage ;//開始顯示頁記錄號(hào)數(shù)
var endShowPage ;//結(jié)束顯示頁記錄號(hào)數(shù)

//回車鍵和點(diǎn)擊"GO"圖片的效果一樣
function keyDown() {
  if(event.keyCode == 13){
    goToPage();
  }
}

//跳到指定頁
function goToPage()
{
   if(totalRecordNum != 0)
   {
  var pageNo = document.BillQueryForm.pageNum.value;
  //校驗(yàn)頁號(hào)
  if((/[^0-9]/gi.test(pageNo)) | pageNo.length==0)
     {
   alert("頁數(shù)必須為數(shù)字!");
   return;
     }
     else
     {
        if((pageNo > totalPageNumber)|(pageNo<1))
       {
         alert("你所輸入的頁數(shù)超出范圍！");
   return;
       }
     }
  //跳轉(zhuǎn)到指定頁
   startShowPage = (pageNo-1)*perPageRecordNum;
   endShowPage  = pageNo*perPageRecordNum;
   exeShowPage();
   currentPageNumber = pageNo;
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber; 
 }
}
//跳轉(zhuǎn)到第一頁
function goToFirstPage()
{
   if(totalRecordNum != 0)
   {
  startShowPage = 0*perPageRecordNum;
  endShowPage  = 1*perPageRecordNum;
  currentPageNumber = 1;
  exeShowPage();
  curPageNo.innerHTML = currentPageNumber;
  totalPageNo.innerHTML = totalPageNumber;
 }
}
function goToLastPage()
{
   if(totalRecordNum != 0)
   {
  if(totalRecordNum%perPageRecordNum==0)//除盡
  {
   var tempVal = totalRecordNum/perPageRecordNum;
     startShowPage = (tempVal-1)*perPageRecordNum;
    endShowPage  = tempVal*perPageRecordNum;
  }
  else
  { 
     var tempVal = totalRecordNum%perPageRecordNum;//得到余數(shù),就是最后一頁要顯示的記錄條數(shù)
     startShowPage = totalRecordNum-tempVal;
      endShowPage  = totalRecordNum;
  }
  currentPageNumber=totalPageNumber;
  exeShowPage(); 
  curPageNo.innerHTML = currentPageNumber;
  totalPageNo.innerHTML = totalPageNumber;
 }
}
function goToNextPage()
{
   if(totalRecordNum != 0)
   {
    if(currentPageNumber< totalPageNumber)
    {
   currentPageNumber = Number(currentPageNumber)+1;   
   startShowPage = (currentPageNumber-1)*perPageRecordNum;
   endShowPage  = currentPageNumber*perPageRecordNum;
   exeShowPage();
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber;
  }
  else
  {
   alert("當(dāng)前頁已經(jīng)是最后一頁了!");
  } 
 }
}
function goToBeforePage()
{
   if(totalRecordNum != 0)
   {
     if(currentPageNumber>1)
     {
   currentPageNumber = currentPageNumber-1;
   startShowPage = (currentPageNumber-1)*perPageRecordNum;
   endShowPage  = currentPageNumber*perPageRecordNum;
   exeShowPage(); 
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber;
  }
  else
  {
   alert("當(dāng)前頁已經(jīng)是第一頁了!");
  } 
 }
}
function exeShowPage()
{   
  for(var i = 0; i<totalRecordNum;i++)
  {
      if ((i>=startShowPage)&&(i<endShowPage))
     {
        document.getElementByIdx_x("row"+i).style.display="";
     }
     else
     {
    document.getElementByIdx_x("row"+i).style.display="none";
   }
  } 
} 
function submitQuery()
         {
         var sForm = document.JXCardNumQueryForm;
    if(sForm.elements["jxCardVO.jxcardid"].value==""){
       alert("請(qǐng)輸入您要查詢的卡號(hào)！");
    sForm.elements["jxCardVO.jxcardid"].focus();
       return 0;
             }
    if(sForm.elements["jxCardVO.password"].value==""){
       alert("請(qǐng)輸入您要查詢的密碼！");
    sForm.elements["jxCardVO.password"].focus();
        return 0;
             }
     sForm.action="jxCardNumQuery.do?type=dxk";
      sForm.submit();
            return;
       }
         function cancelQuery()
         {
             window.history.go(-1);
         }
        
         function check()
         {
         if(document.all("card_no").value==""){
           alert("卡號(hào)不能為空，請(qǐng)輸入卡號(hào)！");
           document.all("card_no").focus();
           return false;
         }
      if(document.all("password").value==""){
        alert("密碼不能為空!");
        document.all("password").focus();
        return false;
       }
       return true;
      }
//-->
</script>

<body onLoad="javascript:goToFirstPage();">


                   
                   <%if(totalRecordNum!=0) {%>
        <tr>
         <td colspan='4' align="right">
          當(dāng)前第<span id="curPageNo"></span>頁/總計(jì)<span id="totalPageNo"></span>頁  
            <a onClick="javascript:goToFirstPage();" style="cursor:hand;"><img src="images/page_top.gif" width="9" height="9" border="0">第一頁</a>
              
            <a onClick="javascript:goToBeforePage();" style="cursor:hand;"><img src="images/page_prev.gif" width="9" height="9" border="0">上一頁</a>
              
            <a onClick="javascript:goToNextPage();" style="cursor:hand;">下一頁<img src="images/page_next.gif" width="9" height="9"></a>
              
            <a onClick="javascript:goToLastPage();" style="cursor:hand;">最后一頁<img src="images/page_end.gif" width="9" height="9" border="0"></a>
               
           <input type="text" id="pageNum" name="pageNum" size="5"  onkeydown="javascript:keyDown();">
           <input type="button" class="orangebtn_s" value="Go!" onclick="javascript:goToPage();" />
         
         </td>
        </tr>
      <%}
      else{%>
       <tr>
        <td colspan='4' align="right">
         <span id="curPageNo"></span>
         <span id="totalPageNo"></span>
        </td>
       </tr>
      <%}%>
      </logic:present>                   
                </table>    
              </td>
            </tr>
      </table> 

  
 </html:form>

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多