JS实现前端分页效果

2024-10-22 09:27:34

本文实例为大家分享了JS实现前端分页效果的具体代码，供大家参考，具体内容如下

一、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>

效果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

非常不错的一个JS分页效果代码，值得研究

本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp
Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
JS实现的简单分页功能示例

本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&
纯js分页代码(简洁实用)

复制代码代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var
利用js制作html table分页示例(js实现分页)

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码一.JS代码复制代码代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
JSP分页显示的实例代码

1.mysql的limit关键字 (DAO) select * from tablename limit startPoint, numberPerPage; tablename 就是要分页显示的那张表的名称: startPoint 就是起始的位置 -1: numberPerPage 就是一页显示的条数. 例如: select * from comment limit 20,5; 则是从comment表中抽取21~25号评论: 2.jQuery load函数 (页面JS) MySQL的limit
jsp分页显示的实现代码

最近这几天在做JSP留言板设计的过程中,遇到了一个问题.先看一张截图: 这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦.不舒服的感受,所以,解决这个问题,通常采用分页显示的方法. 要把页面显示方式设计成这样的方式,通常需要用到这几个基本变量:pageSize(每个页面所显示的记录数).pageCount(一共有多少个页面).showPage(目前显示第几页).recordCount(总的记录数),为了方便理解,画了一张图: 如果
纯javascript实现分页(两种方法)

先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
js分页显示div的内容

div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000
js控制分页打印、打印分页示例

复制代码代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

JS实现前端分页效果

一、HTML部分

二、JS逻辑

相关推荐

随机推荐