JS分页。

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量90 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69759037/article/details/128209178
版权 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid rgb(172, 166, 166);
            margin:  100px auto;
        }
        td,th{
            height: 50px;
            width: 50px;
            text-align: center;
        }
        thead tr{
            border-bottom: 1px solid rgb(175, 171, 171);
        }
        button{
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>aaa</td>
                <td>aaa</td>
            </tr>
            <tr>
                <td>bbb</td>
                <td>bbb</td>
                <td>bbb</td>
            </tr>
            <tr>
                <td>ccc</td>
                <td>ccc</td>
                <td>ccc</td>
            </tr>
            <tr>
                <td>ddd</td>
                <td>ddd</td>
                <td>ddd</td>
            </tr>
            <tr>
                <td>eee</td>
                <td>eee</td>
                <td>eee</td>
            </tr>
            <tr>
                <td>fff</td>
                <td>ff</td>
                <td>eee</td>
            </tr>
        </tbody>
    </table>
    <button class="s">上一页</button>
    <button class="x">下一页</button>
    <script>
        // pno表示跳转的页面
        getPage4(1, 5);
        function getPage4(pno, psize) {
            let item = document.querySelector('table tbody')
            console.log(item);
            // 计算行数
            let rows = item.rows.length;
            console.log(rows);
            // 计算需要分为多少页
            let pages = (rows / psize) > parseInt(rows / psize) ? (parseInt(rows / psize) + 1) : parseInt(rows / psize);
            // 当前显示数据的第一个和最后一个
            let starRow = (pno - 1) * psize + 1;
            let endRow = pno * psize > rows ? rows : pno * psize;
            // 遍历 如果数据在当前页就显示
            for (let i = 1; i < item.rows.length + 1; i++) {
                if (i >= starRow && i <= endRow) {
                    item.rows[i - 1].style.display = "table-row";
                } else {
                    item.rows[i - 1].style.display = "none";
                }
            }
            // 获取按钮
            let pagebtnx = document.querySelector('.x')
            let pagebtns = document.querySelector('.s')
            pagebtnx.addEventListener('click', function () {
                pno++;
                getPage4(pno, 5)
            })
            pagebtns.addEventListener('click', function () {
                console.log('a');
                pno--;
                getPage4(pno, 5)
            })

        }

    </script>
</body>

</html>

miss-ddly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript分页代码实例分享(js分页)
10-26
JavaScript分页代码实例分享 JavaScript分页代码实例分享是指使用JavaScript语言来实现分页功能的代码实例。该实例主要用于实现分页的功能，例如在列表、表格或其他数据展示场景中，通过分页来限制数据的显示数量，...
适配所有浏览器的js分页插件
06-18
**JavaScript分页插件概述** 在网页开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案，尤其适用于那些...
JS分页插件
weixin_70227543的博客
05-19 1394
<body> <div class="box"></div> <script> function Page(classname, options={}){ //将参数定义成属性 this.options = options this.fn = this.options.fn || function(){} this.containe.
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7960
纯js 分页功能。
JavaScript分页功能如何实现
xiaojie513的博客
05-11 1153
函数用于显示分页链接。具体实现可以根据具体需求进行调整。函数用于从数据源中获取当前页显示的数据，函数用于显示当前页的数据，
js分页+搜索
weixin_58462329的博客
05-30 283
好多兄弟和我说，我写的只有分页不能搜索，今天给大家上个好家伙，和昨天不能搜索的版本合并了，老性子，直接上干货。我是小辉，请大家多多关照。
JS 分页效果展示
前端开发,HTML5,css3,JavaScript,node.js,vue
11-30 1131
首先是默认界面，默认首次进入页面的时候，每页展示4条数据，默认展示第一页，并把向前翻页按钮禁止掉。🏡 点击下一页按钮，可以进行翻页效果，当前页不是第一页或者最后一页时，前后翻页按钮都是可用状态。🏡 点击展示数据的按钮 可以渲染不同数量的数据在页面中。
javascript 实现分页
weixin_35755188的博客
02-13 2015
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
js分页代码分享
a810373329的博客
04-28 3176
js代码 var home_page=1;//首页 var curr_page=1;//当前页 var last_page=10;//尾页 var yema_num = 6;//页码数 var page_row=1;//每页的条数 var count_page=0;//总页数 var count_row=0;//总条数 var left_page=1;//最左端页码值 var right_pa...
js分页功能
c_s_d_na的博客
04-08 830
能跳转上一页下一页首页尾页跳转 html 先请求出来数据，这里可以把请求数据封装成一个函数，后面不断去调用这个函数来实现跳转 全局变量 每次换页面显示数据都要更新 arr = data.slice((page - 1) * num, page * num); 首页 $("#first").click(() => { page = 1 port() $("#text").val(1) }) 尾页 last = Math.ceil(data..
用js实现分页
weixin_42609225的博客
01-05 544
使用 JavaScript 实现分页可以使用以下步骤： 首先，你需要确定你要分页的数据，并计算出数据的总页数。 然后，你可以在页面上创建一个分页组件，用来显示分页按钮。 为每个分页按钮添加点击事件处理函数。在这个函数中，你可以使用 AJAX 技术从服务器获取相应页的数据，然后在页面上渲染出来。 当用户点击分页按钮时，你可以使用 JavaScript 改变页面上分页组件的样式，以此来指示当前...
原生js实现分页
jdrunk的博客
04-12 1962
原生javascript分页 html分页与ajax数据请求结合使用 前端js分页 1. page.css .pagination { padding:5px; font-family: '微软雅黑',Arial,Verdana,arial,serif; } .pagination ul { list-style: none; padding-left: 0; font-size: 0; } .pagination ul li { padding: 0 10px;
js分页效果
09-22
总的来说，"js分页效果"是一个综合性的前端开发任务，涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例，开发者不仅可以学习到分页的实现技巧，还能加深对前端开发整体流程的...
jquery.pagination.js分页使用教程
12-10
总结起来，jQuery Pagination.js 提供了一种简洁高效的方式来处理网页中的分页问题，只需简单的配置和少量的 JavaScript 代码，就可以轻松地将分页功能整合到你的网页应用中。无论是简单的列表还是复杂的数据展示，...
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 1952
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 904
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM基础
最新发布
m0_54066656的博客
08-27 568
JQ基础——DOM操作
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 451
npm。
2024前端面试题-js篇
FormAda的博客
08-22 1039
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值