表格滚动分页

<!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); //这里做第二页的数据请求并添加进表格
             */
        }
    });
})
时间: 2024-10-10 09:41:26

表格滚动分页的相关文章

jqgrid 滚动分页

有时,我们不想在底部显示分页信息,而是通过用户滚动鼠标,当鼠标滚到到底自动加载下一页数据,再滚动再加载直至数据全部加载完毕.如何配置? 设置 scroll:true   emptyrecords用于在滚动到数据全部加载完毕后的提示 emptyrecords:"已经到底了" $("#jqGrid").jqGrid({ ... scroll: true,//是否启动滚动分页 emptyrecords: '没有数据了',//滚到到底以后的提示文 ... }); 如果配置为

移动端web 滚动分页

前端代码: <script type="text/javascript"> var page = 2; //当前页的页码 var flagNoData = false; //false var allpage = @Model.PageCount; //总页码,会从后台获取 function showAjax(currentIndex) { $.ajax({ url: "@Url.Action("GetEmployeeData", "

Word:表格无法分页显示

造冰箱的大熊猫@cnblogs 2019/1/30 今天遇到一个Word中表格无法分页显示的问题,特记录下来以备后查 我们知道,在Word中将表格不设置为“允许跨页断行”,假设表格中第二行某个单元格的文字内容较多,超出了当前页面的可用空间,则在当前页上只显示第一行,从第二行起的表格在下一页上开始显示.这样会在当前页上留下一大段空白,影响排版效果. 今天在处理一份Word文档时却遇到,将表格设置为“允许跨页断行”无效的情况.后来发现,需要将表格不设置为“在各页顶端以标题行形式重复出现”.具体参见以

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

版本: django:2.1.7 python:3.7 Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如下: paginator = Paginator(stat_list, numtmp) try: flight_stats = paginator.page(1) except PageNotAnInteger: flight_stats =

LigerUI中通过加载服务端数据进行表格的分页显示

前言:我的这一篇文章是紧接着上一篇关于LigerUI的文章(http://www.zifangsky.cn/379.html)写的,因此在这里我就省略了相关的环境搭建,直接进入正题 一 介绍 在LigerUI中显示表格是用的ligerGrid,同时我们可以通过配置url参数就可以加载远程数据并显示成表格形式.不仅如此,ligerGrid还可以进行数据的排序和分页显示: (1)排序:需要用到"sortname"和"sortorder"这两个参数,分别表示按哪个字段排序

DEVExpress For WPF 中GridControl如何实现滚动分页(延迟查询)

在显示大量数据时一般采用分页显示,但是最近用户需要滚动显示,那么问题来了,滚动显示要求将数据全部查询回来,这显然会导致显示速度很慢. 好在想到一种方式,就是当用户滚动鼓动条的时候再查询下面的数据.好吧 不多说了 上代码 private void GridControl_ScrollChanged(object sender,ScrollChangedEventArgs e){ if(e.ViewprotHeight!=e.ExtentHeight&&e.ExtentHeight!=0)//

向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)

/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name ajax异步的URL中的页码参数名 如pageno page_no 初始加载页码,默认1 [如2,则与前面两参数结合为data.php?pageno=2] is_lazyload 是否开启懒加载 page_count 总页数 empty_msg 没有数据的时候提示(可传输图片) ending_msg

Asp.net MVC3表格共用分页功能

在建立的mvc3项目中,在Razor(CSHTML)视图引擎下,数据会在表格中自动的生成,但分页没有好的控件实现,这里我们开发了设计了一个分页的模板,适合于没有数据提交和有数据提交的分页的分页. 第一:没有有数据提交的分页功能: 第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下: public ActionResult PageIndex(string action, string controller, int currentPage, int pa

ExtJS自制表格Grid分页条

试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. 1 Ext.define('MyApp.ux.Pagination', { 2 extend: 'Ext.Toolbar', 3 // 调用时用此名称 4 alias: 'Pagination', 5 autoDestroy : true, 6 items : ['->',{ 7 // 用于记录查询条件 8 xtype : 'displayfield',