表格滚动分页

最新推荐文章于 2024-06-06 09:45:56 发布
最新推荐文章于 2024-06-06 09:45:56 发布
阅读量461 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lemon-zhang/p/7878402.html
版权

demo效果展示地址：demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./scroll.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="./scroll.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-body">
            <table id="scroll-table">
               <thead>
                    <tr>
                        <th>Months</th>
                        <th>Money</th>
                    </tr>
               </thead>
               <tbody id="scroll-tbody">
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
                    <tr>
                        <td>January</td>
                        <td>$100</td>
                    </tr>
               </tbody>             
            </table>
        </div>
    </div>
</body>
</html>

　　

.scroll-body{
    display: inline-block;
}
.scroll-container{
    text-align: center;
}
#scroll-table{
    border: 1px solid;
    border-collapse: collapse;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: block;
}

　　

$(function () {
    $('#scroll-table').scroll(function (e) {
        var pagination = {
            page: 0,
            pageSize: 20
        };
        //滚动条位置  
        var scrollTop = $('#scroll-table').scrollTop();

        //可视窗口的高度  
        var viewportHeight = $('#scroll-table').height();

        //整个页面可以滚动的高度  
        var scrollHeight = $('#scroll-table')[0].scrollHeight;

        //“如果滚动条的位置”+“可视窗口的高度”=“整个页面可以滚动的高度”，那么就调用相应的函数加载数据  
        if (Math.round(scrollTop + viewportHeight) == scrollHeight) {
            var tr = $('<tr><td> good </td> <td> nice </td> /tr>');
            $('#scroll-tbody').append(tr);

            /*
             * pagination.page += 1;
             * dataAjax(pagination); //这里做第二页的数据请求并添加进表格 
             */
        }
    });
})

 

转载于:https://www.cnblogs.com/lemon-zhang/p/7878402.html

san.hang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现table翻页功能
07-13
使用 js 实现html table 的假分页，列的值，可以用ajax异步获取拼成json字符串后前台设值
vue纯前端表格滚动分页加载
weixin_43996368的博客
08-13 819
纯前端表格滚动分页加载实现效果实现过程 实现效果 实现过程 <div style="width: 100%; overflow: hidden; position: relative" id="container" ref="container" @mousewheel="handleScroll" :style="{ height: pageHeight + 'px' }"> <!-- 表格--> <div class=
无限滚动分页加载与下拉刷新技术探析：原理深度解读与实战应用详述
最新发布
JINGWHALE
06-06 1228
本文详述了无限滚动分页加载与下拉刷新技术的原理，并以实战示例实际应用。下拉分页加载（也称为无限滚动、滚动加载、滚动分页）是一种常见的Web和移动端应用界面设计模式，用于在用户滚动到底部时自动加载下一页内容，而无需点击传统的分页按钮。这种设计旨在提供更加流畅、连续的浏览体验，减少用户交互步骤，尤其适合内容丰富的列表或瀑布流布局。
vue——antd+elementUi——table表格实现滚动加载（分页滚动加载）——技能提升
yehaocheng520的博客
05-31 3625
vue——antd+elementUi——table表格实现滚动加载（分页滚动加载）——技能提升
滚动条分页/滚动条事件触发
maxoracle的博客
09-14 3914
使用jquery框架实现滚动条分页/滚动条事件触发，简单明了 //滚动条事件 record-dataTable-tbody是被滚动的标签的ID，可以是div,table,table里面的tbody等 $("#record-dataTable-tbody").scroll(function(){ //滚动条位置 var scrollTop = $("#record-dataTable-tbod
实现报表滚动到底部翻页效果
cainiao_M的博客
07-30 226
报表数据分多页在页面中显示，为了用户翻看数据方便，报表页面都会有按钮，方便用户点击按钮查看其他页的数据，按钮的翻页方式比较常见，润乾报表展现页面提供的就是这种方式。 这里介绍另一种翻页方式，鼠标滚动来翻页查看数据。 基本实现思路就是在报表展现页面中加鼠标滚动事件，滚到底就调用润乾自带的函数。 在报表展现的页面 showReport.jsp 中添加下面的 JS： if (window.addEventListener)//FF,火狐浏览器会识别该方法 window.addEventListe
易语言高级表格滚动分页显示
07-22
在“易语言高级表格滚动分页显示”这个主题中，我们将深入探讨如何在易语言环境中实现一个具备高级功能的表格控件，包括滚动和分页显示。 在传统的表格显示中，如果数据量过大，一次性加载所有数据可能会导致界面...
基于JavaScript实现表格滚动分页
01-19
本文实例为大家分享了js实现表格滚动分页展示的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=...
易语言源码易语言高级表格滚动分页显示源码.rar
02-22
易语言源码易语言高级表格滚动分页显示源码.rar 易语言源码易语言高级表格滚动分页显示源码.rar 易语言源码易语言高级表格滚动分页显示源码.rar 易语言源码易语言高级表格滚动分页显示源码.rar 易语言源码易语言...
易语言高级表格滚动分页显示源码-易语言
06-13
在这个“易语言高级表格滚动分页显示源码”中，我们可以深入理解易语言在处理数据展示和用户交互方面的高级技巧。 在易语言中，表格组件通常用于显示大量结构化数据，如数据库记录或报表。高级表格滚动分页显示功能...
react表格无缝滚动_table表格无缝向上滚动
weixin_31659095的博客
01-17 640
HtmlCssJs排名地市销售收入(万元)同比(%)环比(%)销售计划(万元)计划完成率(%)排名地市销售收入(万元)同比(%)环比(%)销售计划(万元)计划完成率(%).tablebox {height: 500px;overflow: hidden;position: relative;width: 1000px;margin: 100px auto;background-color: rgb...
列表页无限滚动翻页组件--解决性能问题
weixin_30588729的博客
07-04 162
解决性能问题 使用demo <scroller :data="card_group" @loadmore="next"> <div class="box" slot-scope="props"> <question :question='props.item' :qindex="props.index" >&l...
好快, 1分钟写好下拉刷新,滚动加载自动分页列表
owilson的专栏
08-27 633
前言 欢迎关注BUI Webapp专栏或者bui神速微信公众号. 以往文章: 2019开发最快的Webapp框架--BUI交互框架 微信Webapp开发的各种变态路由需求及解决办法! 【BUI实战篇】BUI数据驱动做的拼图游戏 Webapp移动适配版，基于vuejs拼图游戏改造 webapp结合Dcloud平台打包图文教程 一张脑图看懂BUI Webapp移动快速开发框架【上】-...
Vue3列表竖向滚动（包含使用swiper的翻页效果）
努力的nana
08-31 2786
1、swiper竖向滚动 2、swiper横向轮播 3、实现swiper数据重置之后从第一页开始轮播
vue 实现表格table滚动翻页
csdn_girl的博客
10-13 4763
在了解它的原理前，你需要分清楚三个属性： scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。就是下图中，54条数据的高度，但是因为有滚动条，所以屏幕看不到这么高 scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。就是下图中红色框的高度 clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小，实际上就是可视区域的大小。就
excel 滚动_如何控制Excel表格翻页，一个简单方法就可以实现
weixin_39969232的博客
11-23 1655
Excel表格控制有一些简单方法，可以实现上下左右翻页功能。通常我们在操作中用鼠标来完成上下翻页，其实Excel中，可以通过代码来实现。滚动窗口内容使用的是window对象的SmallScroll方法使用方法表达式。SmallScroll(Down、 Up、 ToRight、了 toleft)ActiveWindow.SmallScroll down:=2'向下滚动2行ActiveWindow.S...
javaScript 实现表格table分页
热门推荐
日常笔记/总结/系列知识梳理
03-07 2万+
并不是一个广泛认知的、标准化的JavaScript库名称，但它通常指的是实现分页功能的JavaScript代码或库。分页是在Web开发中常用的一个功能，特别是当数据量很大时，通过分页可以将数据分成多个小部分，每次只加载一部分数据到页面上，提高页面加载速度和用户体验。如果你正在寻找一个JavaScript库来实现分页功能，有几个流行的选择，比如（注意，这里我稍微修改了你的描述，因为是一个实际存在的库，尽管它可能不是最流行的），或者是更通用的数据表格或列表组件，这些组件内部支持分页，比如DataTables。
vue进阶之vue-easytable实现前端的表格+分页
youyanh的博客
08-08 1万+
表格+分页 对于还在坑中的自己而言，勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容，但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的，没有过多的修饰内容。分页部分可以使用elementui中的，也可以直接用vue-easytable中的，两者一样的，没啥区别。 第一步：引入vue-easytable （这个网上有许多的资料...
antdesignvue 表格滚动分页
05-13
如果你想要实现滚动分页，可以通过以下步骤来实现： 1. 在表格组件中添加 `scroll` 属性来启用滚动条。 2. 将 `pagination` 属性设置为 `false`，以禁用默认的分页。 3. 使用 `@scroll` 事件监听表格滚动事件。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值