logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

js实现分页的几个源码，看完基本就懂了

 青_春 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="点击看我"
          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;

 //获取表格节点对象
 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;
  } else {
   nowpage += 1;
  }
  alert(nowpage + "-----------------");

  //显示上一页记录
  var startindex = (nowpage - 1) * PAGESIZE;
  alert(startindex + "====================++++++");
  var endindex = startindex + PAGESIZE;
  alert(startindex + "-----" + endindex + "---");
  PageInfo(startindex, endindex, countRecord, trUsers)
 }
 //当点击最后一页的操作
 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 ;//结束显示页记录号数

//回车键和点击"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("你所输入的页数超出范围！");
   return;
       }
     }
  //跳转到指定页
   startShowPage = (pageNo-1)*perPageRecordNum;
   endShowPage  = pageNo*perPageRecordNum;
   exeShowPage();
   currentPageNumber = pageNo;
   curPageNo.innerHTML = currentPageNumber;
   totalPageNo.innerHTML = totalPageNumber; 
 }
}
//跳转到第一页
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;//得到余数,就是最后一页要显示的记录条数
     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("当前页已经是最后一页了!");
  } 
 }
}
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("当前页已经是第一页了!");
  } 
 }
}
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("请输入您要查询的卡号！");
    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;
      }
//-->
</script>

<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{%>
       <tr>
        <td colspan='4' align="right">
         <span id="curPageNo"></span>
         <span id="totalPageNo"></span>
        </td>
       </tr>
      <%}%>
      </logic:present>                   
                </table>    
              </td>
            </tr>
      </table> 

  
 </html:form>

 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 青_春 > 《前端》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多