JS实现前端分页

Bertha 。 2022-02-19 17:17 339阅读 0赞

### 一、HTML部分 ###

<!doctype html>
    <html>
    <head>
    	<meta charset='utf-8'>
        <script src="js/jquery.js"></script>
    	<style type="text/css">
    		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: #f9f4f3;}
    		.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: 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.getElementById("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>

效果如图：

![20190520134100749.png][]

[20190520134100749.png]: /images/20220219/5750e872dbaa4eb8819e160d899fb082.png

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

还没有评论，来说两句吧...

相关阅读

相关前端js简单的分页功能

* 首先看下效果 ![在这里插入图片描述][20190912163044785.png] * 只使用js编写一个简单分页, 话不多说直接上代码 * ...

桃扇骨/ 2024年04月18日 22:15/ 0 赞/ 57 阅读

相关前端实现分页效果

前言在实际开发中，大部分分页都是配合后端完成的。但是，有时候并不是这样，并非不是这样。后端会一次性返回所有的数据，而我们前端不可能展示所有数据，而是弄一个分页效果。还有

末蓝、/ 2023年10月13日 10:09/ 0 赞/ 44 阅读

相关前端分页小组件的实现，可分页前端数据

> 前端  <table id="show" border="1px" cellpadding="10px"> </table>

短命女/ 2023年09月27日 18:36/ 0 赞/ 117 阅读

相关 vxetable实现前端分页

直接上代码吧 <template> <div> <page-wraper> <a-modal

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:50/ 0 赞/ 224 阅读

相关前端---原生JS实现分页

<html> <head> <title>原生js分页插件</title> <style> /

叁歲伎倆/ 2022年11月29日 00:54/ 0 赞/ 187 阅读

相关前端怎么实现分页的？js和css

怎么触发打印（导出为PDF）的弹框？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

心已赠人/ 2022年11月21日 03:55/ 0 赞/ 185 阅读

相关 JS实现前端分页

一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'>

Bertha 。/ 2022年02月19日 17:17/ 0 赞/ 340 阅读

相关前端分页功能实现（PC）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加载</title> <sty

╰+攻爆jí腚メ/ 2022年01月09日 05:51/ 0 赞/ 287 阅读

相关前端分页功能实现（PC）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加载</title> <sty

悠悠/ 2022年01月06日 12:21/ 0 赞/ 326 阅读

相关 elementUI实现前端分页

　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((c

╰+攻爆jí腚メ/ 2021年12月23日 16:17/ 0 赞/ 367 阅读