获取全部数据-分页显示功能

最新推荐文章于 2024-05-28 10:22:46 发布
最新推荐文章于 2024-05-28 10:22:46 发布
阅读量8.6k 收藏 6
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liona_koukou/article/details/79536347
版权

数据过多时我们用分页显示，大多数情况下我们可以跟后台协定规则分页，每次只请求当前页面数据进行展示。但如果我们是跟第三方合作进行数据获取而对方一次返回所有数据时前端需要获取全部数据然后分页展示，以下代码用于这种情况

代码如下：（用了rem做单位）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>分页功能-获取所有数据</title>
</head>
<script>
    function fontAuto(){
        document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
    }
    fontAuto();
    window.onresize=function () {
        fontAuto();
    }
</script>
<style>
    .pages {
        margin-right: 0rem;
        position: relative;
        margin-top: 0.3rem;
        bottom: 0;
        text-align: right;
        font-size: 0.12rem;
        padding: 3px;
    }
    .pages a {
        border: 1px solid #0392db;
        background: none;
        color: #0392db;
        padding: 0.04rem 0.08rem;
        margin: 2px;
        margin-left: 6px;
        text-decoration: none;
        cursor: pointer;
    }
    .pages a.disabled {
        color: #0392db;
        font-size: 0.12rem;
        cursor: default;
        border: 1px solid #0392db;
        background: none;
        padding: 0.04rem 0.08rem;
    }
    .pages a.current {
        color: #fff;
        font-weight: bold;
        background: #1d7bdf;
        border-color: #1d7bdf;
    }
    .pages label {
        color: #0392db;
    }
    .pages span {
        font-size: 0.14rem;
        color: #e65c00;
    }
    .pages input {
        border: 1px solid #0392db;
        background: none;
        color: #0392db;
        width: 0.6rem;
        height: 0.24rem;
        line-height: 0.24rem;
        text-align:center;
    }
    .pages a:hover {
        background: #1d7bdf;
        color: #fff;
        transition-duration: 0.2s;
    }
</style>
<body>
<div class="table-wrap" style="margin:0;">
    <ul id="view_list" class="view_list clearfix"></ul>
   <div id="page" class="pages"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var picData;
    var pageSize=8;//每页显示8条数据;
    $.ajax({//ajax一次性获取后台数据
        url: 'xxxxxxxxxxxx',
        data: {},
        type : "GET",
        async : false,
        success: function (resp) {
            if(resp.success){
                var res=resp.rows;//获取结果数组
           if(res.length!=0){
                    picData=resp;
                    //分页计算
             var page_html="";//插入分页HTML
                    page_html+='<a id="first_page" class="disabled">首页</a> <a id="last_page" class="disabled">&lt;&lt;&nbsp;上一页</a>';
                    var totalPage=Math.ceil(resp.total/pageSize);//共分多少页
             for(var i=0;i<totalPage;i++){
                        if(i==0){
                            page_html+='<a class="current index_btn current_page" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
                        }else{
                            page_html+='<a class="index_btn" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
                        }
                    }
                    page_html+='<a id="next_page">下一页&nbsp;&gt;&gt;</a><a id="end_page">末页</a>';
                    page_html+='<label>共 </label> <span>'+totalPage+'</span> <label> 页 </label> <span>'+resp.total+'</span><label> 条 </label> <label> 跳转到 </label> <input type="text" id="page_to" value="1"><label> 页 </label> <a id="page_to_btn">GO</a>';
                    $("#page").html(page_html);
                    var resArr=[];//每页显示的数据放入数组
             if(res.length<pageSize){//如果数据总数小于设置的每页数据数则数组里只放所有数据
                for(var i=0;i<res.length;i++){
                            resArr.push(res[i]);
                        }
                    }else{//如果数据总数大于设置的每页数据数则数组里只放要求的8条数据
                for(var i=0;i<pageSize;i++){
                            resArr.push(res[i]);
                        }
                    }
                    picViewList(resArr);//数据填充进页面的方法
             //分页-首页点击
             $("#first_page").click(function(){
                        $(".index_btn").removeClass("current_page");
                        $(".index_btn").removeClass("current");
                        $(".index_btn").eq(0).addClass("current_page");
                        $(".index_btn").eq(0).addClass("current");
                        picViewList(resArr);
                    })
                    //分页-上一页点击
             $("#last_page").click(function(){
                        var current_index=$(".current_page").attr("pagenum");
                        if(current_index!=1){
                            $(".index_btn").removeClass("current_page");
                            $(".index_btn").removeClass("current");
                            $(".index_btn").eq(current_index-2).addClass("current_page");
                            $(".index_btn").eq(current_index-2).addClass("current");
                            var first_index=(current_index-2)*pageSize;
                            //var last_index=first_index+pageSize-1;
                            var resArr=[];
                            for(var i=first_index;i<first_index+pageSize;i++){
                                resArr.push(res[i]);
                            }
                            picViewList(resArr);
                        }else{
                            $(this).attr("disabled",true);
                        }

                    })
                    //分页-下一页点击
             $("#next_page").click(function(){
                        var current_index=$(".current_page").attr("pagenum");
                        if(current_index!=totalPage){
                            $(".index_btn").removeClass("current_page");
                            $(".index_btn").removeClass("current");
                            $(".index_btn").eq(current_index).addClass("current_page");
                            $(".index_btn").eq(current_index).addClass("current");
                            var first_index=current_index*pageSize;
                            //var last_index=first_index+pageSize-1;
                            var resArr=[];
                            for(var i=first_index;i<first_index+pageSize;i++){
                                resArr.push(res[i]);
                            }
                            picViewList(resArr);
                        }else{
                            $(this).attr("disabled",true);
                        }
                    })
                    //分页-末页点击
             $("#end_page").click(function(){
                        $(".index_btn").removeClass("current_page");
                        $(".index_btn").removeClass("current");
                        $(".index_btn").eq(totalPage-1).addClass("current_page");
                        $(".index_btn").eq(totalPage-1).addClass("current");
                        var first_index=(totalPage-1)*pageSize;
                        var resArr=[];
                        for(var i=first_index;i<first_index+pageSize;i++){
                            resArr.push(res[i]);
                        }
                        picViewList(resArr);
                    })
                    //分页-跳转到某页点击
             $(".index_btn").click(function(){
                        $(".index_btn").removeClass("current_page");
                        $(".index_btn").removeClass("current");
                        $(this).addClass("current_page");
                        $(this).addClass("current");
                        var current_index=$(this).attr("pagenum");
                        var first_index=(current_index-1)*pageSize;
                        var resArr=[];
                        for(var i=first_index;i<first_index+pageSize;i++){
                            resArr.push(res[i]);
                        }
                        picViewList(resArr);
                    })
                    //分页-Go按钮点击
             $("#page_to_btn").click(function(){
                        var go_v=$("#page_to").val();
                        var r = /^[0-9]*[1-9][0-9]*$/;//正整数
                if(r.test(go_v) && go_v<=totalPage && go_v>0){
                            $(".index_btn").removeClass("current_page");
                            $(".index_btn").removeClass("current");
                            $(".index_btn").eq(go_v-1).addClass("current_page");
                            $(".index_btn").eq(go_v-1).addClass("current");
                            var current_index=$(".index_btn").eq(go_v-1).attr("pagenum");
                            var first_index=(current_index-1)*pageSize;
                            var resArr=[];
                            for(var i=first_index;i<first_index+pageSize;i++){
                                resArr.push(res[i]);
                            }
                            picViewList(resArr);
                        }else{
                            alert('请输入正确跳转页数');
                        }
                    })
            }else{
                    $("#page").html("");
                }
            }else{
                alert("检索失败");
                $("#page").html("");

            }
        }
    });
    function picViewList(data){//数据填充页面方法

    }
</script>
</body>
</html>

 

辣姐什么鬼
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java分页查询接口实现-根据返回的所有数据手动分页
比我NB的人，仍然在努力
08-21 7158
在某些时候，我们调用第三方接口时，他们的接口有进行分页，但是并不能满足我们的需求。 那么我们就需要自己进行分页处理。思路一般是： 第一步：获取第三方接口调用返回的所有结果（可以循环获取），具体示例参考Step1.大家要根据自己的实际情况来调整修改。 第二步：根据返回的结果进行分页（调用方法Step2）。 同时，我写了个分页实现的工具类（Step3）供大家参考使用 St...
一个项目中必不可少的功能——分页显示数据
Fans一下下
10-20 3512
分页显示数据      分页，在做一个项目中，分页显示数据库里面的数据是“狠”重要的，为什么呢，比如说，如果我们数据库中数据有几万条，我们在显示数据的时候，全部查出来显示，用户的体验效果不好，而且，效率大大降低。废话就不多说了，在实现分页的时候，一个要的bean，就是PageBean.java.      1.根据分页的显示效果，可以得出以下几个字段 a.   currentPage
php的api分页,带分页接口循环读取的最优方案是哪种
weixin_35510630的博客
03-21 542
目前需要读取第三方接口数据，数据量比较大，第三方才用了分页的方式，目前我的方案是，在循环中调用curl读取接口的方法，再把json数据转换为数组，在拼接数组，进行数据筛选过滤入库操作，但是由于第三方接口不稳定，可能会造成读取失败。请问是否有更好的方案？回复内容：目前需要读取第三方接口数据，数据量比较大，第三方才用了分页的方式，目前我的方案是，在循环中调用curl读取接口的方法，再把json数据转换...
终于学会了分页，Mybatis的分页查询、PageHepler，分页条件查询
最新发布
制定持续可量化的目标，不断坚持。
05-28 797
原来 Mybatis的分页查询操作，PageHepler插件分页查询，条件查询是这样的
【前端04】如何根据分页接口获取所有数据
Noyade的博客
04-16 376
分页接口如下单独使用获取全部数据。
分页显示数据列表
12-20
从数据库查询并读取数据，再将读取到的数据分页显示到表格里
分页显示 html js处理,js 拉取所有数据，前端进行分页处理
weixin_33628926的博客
06-19 386
拉取所有数据，前端进行分页处理序号123456789上一页/下一页第页跳转function pageNum() {page = new Page(1,'table','temp1-container');//参数含义：每页显示条数；table的id;tbody的id}var tem1=document.getElementById("temp1").innerHTML;//表格数据function...
Java、SpringBoot请求第三方分页接口，获取全部数据。
Xiaoweidumpb
08-24 1470
【代码】Java、SpringBoot请求第三方分页接口，获取全部数据。
显示数据实现分页功能，详细过程，以及使用方法教程
weixin_45940087的博客
09-26 2153
利用工具类PageBean实现页面分页功能详细流程 1.首先封装一个PageBean类 package com.csi.utils; import java.util.List; public class PageBean { //结果数据集 private List<T> datas ; //总记录数 private int totalRecords ; //每页显示条数 private int perShowPageNO = 10 ; //总页数 private int totalPa
基于PHP实现数据分页显示功能
10-22
本文将详细介绍如何使用PHP来实现数据分页显示功能。 首先，分页功能的基本原理是在数据库查询时，限制返回的数据量，并为用户提供切换不同页面的链接。在每个页面中，我们只会查询和显示当前页面需要展示的数据。 ...
WinForm-分页显示-SQlite.rar
06-09
综上所述，"WinForm-分页显示-SQLite.rar"项目是一个利用WinForm和SQLite数据库实现数据分页显示的实例。通过这个项目，开发者可以学习如何在WinForm应用程序中高效地管理和显示大量数据，同时保持良好的用户交互...
Layui实现数据表格默认全部显示(不要分页)
10-16
在本文中，我们将深入探讨如何使用Layui框架来实现数据表格默认全部显示，而无需分页功能。Layui是一款轻量级的前端UI框架，提供了丰富的组件，包括表格、按钮、表单等，方便开发者构建用户界面。在某些场景下，用户...
Asp.net MVC 中利用jquery datatables 实现数据分页显示功能
10-19
在*** MVC项目中使用jquery datatables插件实现数据分页显示功能是一种常见的数据展示方式。这种方式可以提高数据处理的效率和用户交互的体验。具体来说，jquery datatables通过其丰富的API，能够轻松地将数据从后端...
DRF实现获取分页数据
YANGGEOL
10-15 657
目的 记录如何实现DRF获取数据并实现分页 代码 settings设置 REST_FRAMEWORK = { "PAGE_SIZE": 2, # 每页多少数据 方法一二三设置每页的 "DEFAULT_PAGINATION_CLASS": "res_framework.pagination.PageNumberPagination" # 补充方法 } 或者通过继承 class MyPageNumberPagination(PageNumberPagination): page
分页功能、从一个接口拿到数据并放到数据库，然后批量获取给到前端接口
diebijiao8720的博客
01-22 830
1、使用情况：前端页面只需要点击后显示下一页即可（不需要显示“上一页”，“下一页”和"页码”） 　　环境:SpringMVC、Hibernate、Spring （1）前端需要jason格式的数据，如果前端想要分页获取数据。只需要传递传递两个参数即可。pageNo和pageSize。这里是将pageSize设为了固定值。 　　 @SuppressWarnings({ "raw...
分页读取数据，切分集合传递
qq_42892856的博客
08-05 133
代码】分页读取数据，切分集合传递。
分页(对全部数据进行分页)
Myair_AC的博客
10-07 2456
需求: 1 . 对全部数据进行分页; 2 . 对根据查询(模糊查询)出来的数据进行分页. 1: 步骤: 要有jsp界面代码–>这个代码的script标签中主要是showPageData函数(进行显示当前页的数据)–>则需要在这个函数里面进行查询数据–>就需要把当前页数和每页的数据条数传到servlet(通过ajax)–>service–>dao层进行查询–>返回的数据给一个实体类–>xhr
获取所有记录（带查询条件、分页）
精哥哥
04-11 2123
获取所有记录（带查询条件、分页） //获取所有记录 public function table() { if (isset($_GET['reservation_type'])) { $map['reservation_type'] = $_GET['reservation_type']; } ...
vue+element-ui el-pagination 分页后 导出全部数据
u010306287的博客
06-05 7487
vue+element-ui el-pagination 分页后 数据无法全部导出element-ui分页后的数据无法导出nextTick方式setTimeOut方式深拷贝方式总结 element-ui分页后的数据无法导出 最近项目使用element-ui进行前端开发，主要用来做固定报表的页面数据展示，必不可少的要使用到分页，但使用分页后导出Excel只能导出当前页，很是郁闷网上查到许多办法后最终找到以下几个办法真身使用的是setTimeout方法 nextTick方式 e
Struts框架下数据分页显示的实现步骤
"这篇教程是关于如何在Java Web应用中，使用Struts框架实现数据的分页显示。" 在Web开发中，分页显示大量数据是常见的需求，它能够提高用户体验，避免一次性加载过多信息导致页面加载缓慢。Struts作为经典的MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

辣姐什么鬼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值