2. 程式人生 > 程式設計 >JS實現前端分頁效果

JS實現前端分頁效果

阿新 • • 發佈：2021-08-20

本文例項為大家分享了實現前端分頁效果的具體程式碼，供大家參考，具體內容如下

一、HTML部分

<!doctype html>
<html>
<head>
 <meta charset='utf-8'>
    <script src="js/.js"></script>
 <style type="text/">
  a{text-decoration: none;}
  table {border-collapse:collapse;width: 100%;font-size: 14px;}
  th{background-color: #ddd;}
  table,td,th {border:1px solid #e7e8ec;}
  th,tr{height: 40px;}
  td {text-align: center;}
  tr:hover{background-color: #f9f
 
4f3;}
  .barcon {width: 1000px;margin: 0 auto;text-align: center;}
  .barcon2 {float: right;}
  .barcon2 ul {margin: 20px 0;padding-left: 0;list-style: none;text-align: center;}
  .barcon2 li {display: inline;}
  .barcon2 a {font-size: 16px;font-weight: normal;display: inline-block;padding:FyZszedr 5px;padding-top: 0;color: black;border: 1px solid #ddd;background-color: #fff;}
  .barcon2 a:hover{background-color: #eee;}
  .ban {opacity: .4;}
 </style>
</head>
<body>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
 <thead>
 <tr align="center">
  <th width="150" height="33" class="td2">序號</th>
  <th width="300" class="td2">使用者名稱</th>
  <th width="250" class="td2">許可權</th>
  <th width="250" class="td2">操作</th>
 </tr>
 </thead>
 <tbody id="myTable">
 <tr align="center">
  <td class="td2" height="33" width="150">1</td>
  <td class="td2" >admin</td>
  <td class="td2" >管理員</td>
  <td class="td2" ><a href="###" >修改</a></td>
 </tr>
 </tbody>
</table>
<div id="barcon" class="barcon" >
 <div id="barcon2" class="barcon2">
  <ul>
   <li><a href="###" id="prePage">上一頁</a></li>
   <li id="barcon1"></li>
   <li><a href="###" id="nextPage">下一頁</a></li>
   <li><input type="text" id="num" size="2" oninput="value=value.replace(/[^\d]/g,'')"></li>
   <li><a href="###" id="jumpPage" onclick="jumpPage()">跳轉</a></li>
  </ul>
 </div>
</div>
</body>
</html>

二、JS邏輯

<script>
     // 初始化資料
    function dynamicAddUser(num){
        for(var i=1;i<=num;i++)
        {
            var trNode=document.createElement("tr");
            $(trNode).attr("align","center");
            //序號
            var tdNodeNum=document.createElement("td");
            $(tdNodeNum).html(i+1);
            tdNodeNum.style.width = "150px";
            tdNodeNum.style.height = "33px";
            tdNodeNum.className = "td2";
            //使用者名稱
            var tdNodeName=document.createElement("td");
            $(tdNodeName).html("lzj"+i);
            tdNodeName.style.width = "300px";
            tdNodeName.className = "td2";
            //許可權
            var tdNodePri=document.createElement("td");
            tdNodePri.style.width = "250px";
            tdNodePri.className = "td2";
            var priText=document.createElement("span");
            $(priText).css({"display":"inline-block","text-align":"center"});
            $(priText).text(
 
"普通使用者");
            tdNodePri.appendChild(priText);
            //操作
            var tdNodeOper = document.createElement("td");
            tdNodeOper.style.width = "170px";
            tdNodeOper.className = "td2";
            var editA = document.createElement("a");
            $(editA).attr("href","###").text("編輯");
            $(editA).css({ display: "inline-block" });
            tdNodeOper.appendChild(editA);
 
            trNode.appendChild(tdNodeNum);
            trNode.appendChild(tdNodeName);
            trNode.appendChild(tdNodePri);
            trNode.appendChild(tdNodeOper);
            $("#myTable")[0].appendChild(trNode);
        }
    }
    $(function(){
        dynamicAddUser(80);
        goPage(1,10);
    })
 
    /**
     * 分頁函式
     * pno--頁數
     * psize--每頁顯示記錄數
     * 分頁部分是從真實資料行開始，因而存在加減某個常數，以確定真正的記錄數
     * 純js分頁實質是資料行全部載入，通過是否顯示屬性完成分頁功能
     **/
    var pageSize=10;//每頁顯示行數
    var currentPage_=1;//當前頁全域性變數，用於跳轉時判斷是否在相同頁，在就不跳，否則跳轉。
    var totalPage;//總頁數
    function goPage(pno,psize){
        var itable = document.getElemehttp://www.cppcns.comntById("myTable");
        var num = itable.rows.length;//表格所有行數(所有記錄數)
 
        pageSize = psize;//每頁顯示行數
        //總共分幾頁
        if(num/pageSize > parseInt(num/pageSize)){
            totalPage=parseInt(num/pageSize)+1;
        }else{
            totalPage=parseInt(num/pageSize);
        }
        var currentPage = pno;//當前頁數
        currentPage_=currentPage;
        var startRow = (currentPage - 1) * pageSize+1;
        var endRow = currentPage * pageSize;
        endRow = (endRow > num)? num : endRow;
 
        $("#myTable tr").hide();
        for(var i=startRow-1;i<endRow;i++) {
            $("#myTable tr").eq(i).show();
        }
 
        var tempStr = currentPage+"/"+totalPage;
        document.getElementById("barcon1").innerHTML = tempStr;
 
        if(currentPage>1){
            $("#firstPage").on("click",function(){
                goPage(1,psize);
            }).removeClass("ban");
            $("#prePage").on("click",function(){
                goPage(currentPage-1,psize);
            }).removeClass("ban");
        }else{
            $("#firstPage").off("click").addClass("ban");
            $("#prePage").off("click").addClass("ban");
        }
 
        if(currentPage<totalPage){
            $("#nextPage").on("click",function(){
                goPage(currentPage+1,psize);
            }).removeClass("ban")
            $("#lastPage").on("click",function(){
                goPage(totalPage,psize);
            }).removeClass("ban")
        }else{
            $("#nextPage").off("click").addClass("ban");
            $("#lastPage").off("click").addClass("ban");
        }
    }
 
    function jumpPage() {
        var num=parseInt($("#num").val());
        if(num != currentPage_ && !isNaN(num) && num <= totalPage && num > 0) {
            goPage(num,pageSize);
        }
    }
</script>

效果如圖：

JS實現前端分頁效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

相關推薦

JS實現前端分頁效果

本文例項為大家分享了實現前端分頁效果的具體程式碼，供大家參考，具體內容如下

javascript實現前端分頁效果

本文例項為大家分享了javascript實現前端分頁效果的具體程式碼，供大家參考，具體內容如下

js實現簡單的前端分頁效果

有些專案業務比較簡單，但用到前端分頁的地方又比較多，外掛的體積比較難控制用起來也麻煩，所以自己寫一個簡易的。

js物件實現資料分頁效果

本文例項為大家分享了物件實現資料分頁效果的具體程式碼，供大家參考，具體內容如下

Unity3D實現列表分頁效果

本文例項為大家分享了Unity3D實現列表分頁效果的具體程式碼，供大家參考，具體內容如下

使用原生JS實現滾輪翻頁效果的示例程式碼

一、滾輪事件 當用戶通過滑鼠滾輪與頁面互動、在垂直方向上滾動頁面時，就會觸發mousewheel事件，這個事件就是實現全屏切換效果需要用到的。在IE6,IE7,IE8,Opera 10+,Safari 5+中，都提供了 “mousewheel” 事件，而

vue實現前端分頁完整程式碼

本文例項為大家分享了vue實現前端分頁的具體程式碼，供大家參考，具體內容如下

vue專案使用elementUI pagination 實現前端分頁

通常情況下分頁都是由後端來實現，前端只需要傳遞分頁引數，但是不排除需要前端來進行分頁的情況，今天就來和大家說下前端如何實現分頁：

html+vue.js 實現漂亮分頁功能可相容IE

當功能比較簡單，在單一html中使用vue.js分頁展示資料，並未安裝腳手架，或使用相關UI框架，此時需要手寫一個分頁器，不失為最合理最便捷的解決方案

javascript實現前端分頁功能

前言：今天給大家帶來的是前端資料的分頁功能，供大家參考，具體內容如下

jQuery實現Table分頁效果

本文例項為大家分享了實現Table分頁效果的具體程式碼，供大家參考，具體內容如下

原生js實現分頁效果

本文例項為大家分享了js實現分頁效果的具體程式碼，供大家參考，具體內容如下

vue+Element-ui前端實現分頁效果

本文例項為大家分享了vue+Element-ui前端實現分頁效果的具體程式碼，供大家參考，具體內容如下

原生JS實現酷炫分頁效果

本文例項為大家分享一個如下效果的分頁特效，是不是很酷炫。 以下是程式碼實現：

JS實現前端動態分頁碼程式碼例項

思路分析：有3種情況 第一種情況，當前頁面curPage < 4 第二種情況，當前頁面curPage == 4

vue+element實現分頁--之--前端分頁

效果圖: 訪問的資料量小,一次返回所有資料,再次利用elementUI-Table 和el-pagination元件進行展示,關鍵點事資料的篩選

Xadmin控制元件的實現：〇四查詢檢視二——分頁效果的實現

在前面的一章裡我們實現瞭如何在一個頁面裡按照表格的方式顯示出來所需要的資料，但是隨著資料量的增加，需要做一個分頁的效果。

vue+Element-ui實現分頁效果

當我們向後臺請求大量資料的時候，並要在頁面展示出來，請求的資料可能上百條資料或者更多的時候，並不想在一個頁面展示，這就需要使用分頁功能來去完成了。

用php實現分頁效果的示例程式碼

分頁效果在網頁中是常見的，可是怎樣才能實現分頁呢，今天做了兩種方法來實現一下分頁的效果

前端Jquery使用pagination.js外掛進行分頁

技術標籤：前端Jqueryjqueryajax 前言： 分頁功能是我們在開發過程中最常見的一個功能了，作為一個以往只會搬磚不會造磚的年輕程式設計師，今天我要自己來實現這個功能，於是我查了不少的方法，今天我用jquery的