天天看點
傳回

js實作分頁的幾個源碼，看完基本就懂了

第一種：

  <!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>

        名稱

        性别

        郵箱

        出生日期

        操作

      </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>

         <input type="text" name="name" id="name" />

       </tr>

         性别:

         <select id="sex">

          <option value="男">

           男

          </option>

          <option value="女">

           女

         </select>

         郵箱:

         <input type="text" name="email" id="email" />

         出生日期:

         <input type="text" id="bir" name="bir" />

         <input type=button value="點選看我"

          onclick="showCalendar(this,document.all.bir)">

       <tr id="addu">

        <td colspan="2">

         <input type="button" value="添加" onclick="addUser()" id="add" />

       <tr id="addu1">

         <input type="button" value="修改" id="upduser" />

      </tbody>

     </table>

    </form>

  </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;

 //擷取表格節點對象

 var tusers = document.getElementByIdx_x("tusers");

 //建立行

 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";

  }

 //當添加使用者的時候調用分頁技術

 testPage()

//定義分頁标簽節點對象并建立

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;

//分頁技術的實作

function testPage() {

 var tbodyUsers = document.getElementByIdx_x("users");

 var trUsers = tbodyUsers.getElementsByTagName_r("tr");

 //擷取總記錄數

 var countRecord = trUsers.length;

 //每頁顯示的記錄數

 var PAGESIZE = 2;

 //總頁數

 var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE

   : Math.ceil(countRecord / PAGESIZE));

 //目前頁資訊

 // =======>從那條記錄開始 (nowpage-1)*PAGESIZE;

 //var nowpage = countPage;

 //擷取建立分頁标簽的節點對象

 var pages = document.getElementByIdx_x("pages");

 //如果沒有建立分頁标簽的節點則建立節點對象

 if (!pages.hasChildNodes()) {

  getPages(nowpage);

 //當點選首頁時的操作

 indexPage.onclick = function() {

  nowpage = 1;

  //顯示首頁的記錄

  indexPageInfo(countRecord, trUsers);

 //當點選上一頁的操作

 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)

 //當點選下一頁的操作

 downPage.onclick = function() {

  if (nowpage + 1 >= countPage) {

   nowpage = countPage;

   nowpage += 1;

  alert(nowpage + "-----------------");

  alert(startindex + "-----" + endindex + "---");

 //當點選最後一頁的操作

 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%>;//總記錄條數(從java程式中擷取)

var currentPageNumber = 1;//目前頁号

if(totalRecordNum==0)

{

 currentPageNumber = 0;

var perPageRecordNum = 5;//每頁記錄條數(js中設定)

//計算總頁數

var totalPageNumber = Math.ceil(totalRecordNum/perPageRecordNum);

var startShowPage ;//開始顯示頁記錄号數

var endShowPage ;//結束顯示頁記錄号數

//Enter鍵和點選"GO"圖檔的效果一樣

function keyDown() {

  if(event.keyCode == 13){

    goToPage();

//跳到指定頁

function goToPage()

   if(totalRecordNum != 0)

   {

  var pageNo = document.BillQueryForm.pageNum.value;

  //校驗頁号

  if((/[^0-9]/gi.test(pageNo)) | pageNo.length==0)

     {

   alert("頁數必須為數字!");

   return;

     }

     else

        if((pageNo > totalPageNumber)|(pageNo<1))

       {

         alert("你所輸入的頁數超出範圍！");

       }

  //跳轉到指定頁

   startShowPage = (pageNo-1)*perPageRecordNum;

   endShowPage  = pageNo*perPageRecordNum;

   exeShowPage();

   currentPageNumber = pageNo;

   curPageNo.innerHTML = currentPageNumber;

   totalPageNo.innerHTML = totalPageNumber; 

//跳轉到第一頁

function goToFirstPage()

  startShowPage = 0*perPageRecordNum;

  endShowPage  = 1*perPageRecordNum;

  currentPageNumber = 1;

  exeShowPage();

  curPageNo.innerHTML = currentPageNumber;

  totalPageNo.innerHTML = totalPageNumber;

function goToLastPage()

  if(totalRecordNum%perPageRecordNum==0)//除盡

  {

   var tempVal = totalRecordNum/perPageRecordNum;

     startShowPage = (tempVal-1)*perPageRecordNum;

    endShowPage  = tempVal*perPageRecordNum;

  else

  { 

     var tempVal = totalRecordNum%perPageRecordNum;//得到餘數,就是最後一頁要顯示的記錄條數

     startShowPage = totalRecordNum-tempVal;

      endShowPage  = totalRecordNum;

  currentPageNumber=totalPageNumber;

  exeShowPage(); 

function goToNextPage()

    if(currentPageNumber< totalPageNumber)

    {

   currentPageNumber = Number(currentPageNumber)+1;   

   startShowPage = (currentPageNumber-1)*perPageRecordNum;

   endShowPage  = currentPageNumber*perPageRecordNum;

   totalPageNo.innerHTML = totalPageNumber;

   alert("目前頁已經是最後一頁了!");

  } 

function goToBeforePage()

     if(currentPageNumber>1)

   currentPageNumber = currentPageNumber-1;

   exeShowPage(); 

   alert("目前頁已經是第一頁了!");

function exeShowPage()

{   

  for(var i = 0; i<totalRecordNum;i++)

      if ((i>=startShowPage)&&(i<endShowPage))

        document.getElementByIdx_x("row"+i).style.display="";

    document.getElementByIdx_x("row"+i).style.display="none";

} 

function submitQuery()

         {

         var sForm = document.JXCardNumQueryForm;

    if(sForm.elements["jxCardVO.jxcardid"].value==""){

       alert("請輸入您要查詢的卡号！");

    sForm.elements["jxCardVO.jxcardid"].focus();

       return 0;

             }

    if(sForm.elements["jxCardVO.password"].value==""){

       alert("請輸入您要查詢的密碼！");

    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("卡号不能為空，請輸入卡号！");

           document.all("card_no").focus();

           return false;

      if(document.all("password").value==""){

        alert("密碼不能為空!");

        document.all("password").focus();

        return false;

       return true;

      }

//-->

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

                   <%if(totalRecordNum!=0) {%>

        <tr>

         <td colspan='4' align="right">

          目前第<span id="curPageNo"></span>頁/總計<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{%>

        <td colspan='4' align="right">

         <span id="curPageNo"></span>

         <span id="totalPageNo"></span>

      <%}%>

      </logic:present>                   

                </table>    

              </td>

            </tr>

      </table> 

 </html:form>若轉載請注明出處！若有疑問，請回複交流！

javascript 前端開發 資料安全/隐私保護 go java js實作分頁 ssh實作分頁 源碼.js .js源碼分析 ssh怎麼用實作分頁
上一篇: MED-V伺服器的部署與配置
下一篇: 克隆虛拟機網卡問題

繼續閱讀