前端分页

最新推荐文章于 2023-04-14 14:50:57 发布
最新推荐文章于 2023-04-14 14:50:57 发布
阅读量181 收藏 1
点赞数
分类专栏： 前端分页 文章标签： 前端分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40387112/article/details/92772183
版权

html

 <div style="font-size: 24px;margin-top: 15px;"><span>共{{total}}条记录，共{{number}}页。</span>&nbsp;<span>当前第{{page}}页，</span><span>本页{{physicalList.length}}数据</span></div>
    <div align="center" style="font-size: 30px;margin-top: -37px;margin-left: 415px">

        <a @click="goPage(1,total/pageSize)" id="first">首页</a>
        <a @click="goPage(page-1,total/pageSize)" id="last">上一页</a>
        <a @click="goPage(page+1,total/pageSize)" id="next">下一页</a>
        <a @click="goPage(total/pageSize,total/pageSize)" id="finally">尾页</a>
    </div>
    <div class="mui-media-body"
         style="margin:-10% 100px;height: 50px;width:140px;text-align: center;color: #ffffff;background-color: #1d90e6;border-radius: 20px;float: right">

            <span @click="goback()"
                  style=" font-size: 24px;float: left;margin-top: 8px;margin-left: 11px;">
                返回上一页
            </span>
    </div>

vue数据初始化

 data: {
             number:0,//总页数
            page:1,//当前页
            idCard:"",
            name: "",
            title: "",
            flag: true,
            orgid: '',
            type: "",
            physicalList: [],//用来存放全部数据
            objectList:[],//用来存放每页的数据
            pageSize:6,//每页显示的条数
            total:0,//总条数
            record:"",
            forgid:""

        }

数据初始化

created: function () {
            let that = this;
            let theRequest = new Object();
            let currentUrl = window.location.search;


            if (currentUrl.indexOf("?") != -1) {
                let str = currentUrl.substr(1);
                strs = str.split("&");
                for (let i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            let queryType = "";

            if (theRequest.type != null && theRequest.type != '') {
                queryType = theRequest.type;
            }
            this.type = queryType;
            if (queryType == "mz") {
                this.title = "门诊";
                this.flag = false;
            }
            if (queryType == "zy") {
                this.title = "住院";
                this.flag = true;
            }
            let postData = Qs.stringify({
                type: queryType
            })
            let id = theRequest.id;
            this.uid = id;
            console.log(id)
            that.idCard = theRequest.idCard;
            let name = decodeURI(theRequest.name);
            this.name = name;
            console.log(this.name)
            if (theRequest.orgid != null && theRequest.orgid != '') {
                this.orgid = theRequest.orgid;
            } else {
                this.orgid = 120925;
            }
            that.forgid = theRequest.forgid;
            axios.post(url + 'hra00_03/findChildrenInfoById?pid=' + this.uid + "&pageSize=10000"+"&page="+this.page+"&forgid="+this.forgid , {}, {
                withCredentials: true,
                changeOrigin: true
            }).then(function (response) {
                let result = response.data.data;
                if (result.msgCode == 1000) {
                    that.title = result.title;
                    that.total = result.data.length;
                    that.number =  Math.ceil(response.data.data.data.length/that.pageSize);
                    //中间页数
                    if(1<that.page && that.page<that.number){

                        $("#first").css("color", "#337ab7");
                        $("#last").css("color", "#337ab7");
                        $("#next").css("color", "#337ab7");
                        $("#finally").css("color", "#337ab7");
                    }else if (1 == Math.ceil((that.number))){//一共一页
                        $("#first").css("color", "#b6b6b6");
                        $("#last").css("color", "#b6b6b6");
                        $("#next").css("color", "#b6b6b6");
                        $("#finally").css("color", "#b6b6b6");
                    }else if (that.page == Math.ceil((that.number))){//最后一页
                        $("#first").css("color", "#337ab7");
                        $("#last").css("color", "#337ab7");
                        $("#next").css("color", "#b6b6b6");
                        $("#finally").css("color", "#b6b6b6");
                    }else if (that.page < Math.ceil((that.number)) && 1 == that.page){//第一页

                        $("#first").css("color", "#b6b6b6");
                        $("#last").css("color", "#b6b6b6");
                        $("#next").css("color", "#337ab7");
                        $("#finally").css("color", "#337ab7");
                    }
                   // that.number =  Math.ceil(result.total/that.pageSize);
                    for (var i = 0; i < result.data.length; i++) {
                        if (result.data[i].sfrq != null) {
                            result.data[i].sfrq = result.data[i].sfrq.substr(0, 10)
                        }
                    }
                    if(that.total > that.pageSize){
                        for (var i = 0; i < that.pageSize; i++) {
                            that.objectList[i] = result.data[i];
                        }
                    }else{
                        for (var i = 0; i < that.total; i++) {
                            that.objectList[i] = result.data[i];
                        }
                    }

                    that.physicalList = result.data;
                    console.log(that.physicalList.length)
                } else if (result.msgCode == 1001) {
                    console.log(result.message)
                } else if (result.msgCode == 1002) {
                    console.log(result.message)
                } else if (result.msgCode == 1003) {
                    console.log(result.message)
                } else {
                    console.log(result.message)
                }
                console.log(result);
            }).catch(function (error) {
                console.log(error)
            });

            console.log(this.physicalList)
        }

js代码

methods: {
            gopath: function (id,sign) {
                if(sign == '0'){
                    window.location =encodeURI(encodeURI( htmlUrl + "micopc/healthRecords/children/childrenInfo60.html?type=" + this.type + "&id=" + id + "&name=" + this.name+"&uid="+this.uid+"&forgid="+this.forgid));
                }else if(sign == '1'){
                    window.location =encodeURI(encodeURI( htmlUrl + "micopc/healthRecords/children/childrenInfo61.html?type=" + this.type + "&id=" + id + "&name=" + this.name+"&uid="+this.uid+"&forgid="+this.forgid));
                }else if(sign == '2'){
                    window.location =encodeURI(encodeURI( htmlUrl + "micopc/healthRecords/children/childrenInfo62.html?type=" + this.type + "&id=" + id + "&name=" + this.name+"&uid="+this.uid+"&forgid="+this.forgid ));
                }else if(sign == '3'){
                    window.location =encodeURI(encodeURI( htmlUrl + "micopc/healthRecords/children/childrenInfo63.html?type=" + this.type + "&id=" + id + "&name=" + this.name+"&uid="+this.uid+"&forgid="+this.forgid));
                }

            },
            goback: function () {
                window.location.href = htmlUrl + "micopc/healthRecords/basicInfo/basicHome.html?idCard=" + this.idCard+"&forgid="+this.forgid;
            },
            goPage:function(page,checkPage){

                let that = this;
                that.objectList.splice(0,that.objectList.length);

                if(page <= checkPage){
                    page = Math.ceil((page));
                    if(page==0){
                        page = 1;
                    }
                    if(page<1){
                        page = 1;
                    }
                    that.page = page;
                    if(page == 1){
                        for (var i = 0; i < that.pageSize; i++) {
                            that.objectList[i] = that.physicalList[(that.page)*(that.pageSize+i)-6];
                        }
                    }else{
                        if((that.page-1)*(that.pageSize)+that.pageSize > that.physicalList.length){

                            let listSize = that.physicalList.length - (that.page-1)*(that.pageSize)+that.pageSize - that.pageSize;
                            let end = (that.page-1)*(that.pageSize);

                            for (var i = 0; i < listSize; i++) {

                                that.objectList[i] = that.physicalList[end+i];
                            }
                        }else{

                            for (var i = 0; i < that.pageSize; i++) {

                                that.objectList[i] = that.physicalList[(that.page-1)*(that.pageSize)+i];
                            }
                        }

                    }

                        if(1<that.page && that.page<that.number){

                            $("#first").css("color", "#337ab7");
                            $("#last").css("color", "#337ab7");
                            $("#next").css("color", "#337ab7");
                            $("#finally").css("color", "#337ab7");
                        }else if (1 == Math.ceil((that.number))){//一共一页
                            $("#first").css("color", "#b6b6b6");
                            $("#last").css("color", "#b6b6b6");
                            $("#next").css("color", "#b6b6b6");
                            $("#finally").css("color", "#b6b6b6");
                        }else if (that.page == Math.ceil((that.number))){//最后一页
                            $("#first").css("color", "#337ab7");
                            $("#last").css("color", "#337ab7");
                            $("#next").css("color", "#b6b6b6");
                            $("#finally").css("color", "#b6b6b6");
                        }else if (that.page < Math.ceil((that.number)) && 1 == that.page){//第一页

                            $("#first").css("color", "#b6b6b6");
                            $("#last").css("color", "#b6b6b6");
                            $("#next").css("color", "#337ab7");
                            $("#finally").css("color", "#337ab7");
                        }

                }else{
                    page =  Math.ceil((checkPage));
                    if(checkPage <= 0){
                        page = 1;
                    }
                    that.page = page;
                    if(page == 1){
                        for (var i = 0; i < that.pageSize; i++) {

                            that.objectList[i] = that.physicalList[(that.page)*(that.pageSize+i)-6];
                        }
                    }else{
                        if((that.page-1)*(that.pageSize)+that.pageSize > that.physicalList.length){

                            let listSize = that.physicalList.length - (that.page-1)*(that.pageSize)+that.pageSize - that.pageSize;
                            let end = (that.page-1)*(that.pageSize);

                            for (var i = 0; i < listSize; i++) {

                                that.objectList[i] = that.physicalList[end+i];
                            }
                        }else{

                            for (var i = 0; i < that.pageSize; i++) {
                                
                                that.objectList[i] = that.physicalList[(that.page-1)*(that.pageSize)+i];
                            }
                        }

                    }
                        //中间页数
                        if(1<that.page && that.page<that.number){

                            $("#first").css("color", "#337ab7");
                            $("#last").css("color", "#337ab7");
                            $("#next").css("color", "#337ab7");
                            $("#finally").css("color", "#337ab7");
                        }else if (1 == Math.ceil((that.number))){//一共一页
                            $("#first").css("color", "#b6b6b6");
                            $("#last").css("color", "#b6b6b6");
                            $("#next").css("color", "#b6b6b6");
                            $("#finally").css("color", "#b6b6b6");
                        }else if (that.page == Math.ceil((that.number))){//最后一页
                            $("#first").css("color", "#337ab7");
                            $("#last").css("color", "#337ab7");
                            $("#next").css("color", "#b6b6b6");
                            $("#finally").css("color", "#b6b6b6");
                        }else if (that.page < Math.ceil((that.number)) && 1 == that.page){//第一页

                            $("#first").css("color", "#b6b6b6");
                            $("#last").css("color", "#b6b6b6");
                            $("#next").css("color", "#337ab7");
                            $("#finally").css("color", "#337ab7");
                        }


                }



            }
        }

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

南瓜匠
关注
专栏目录
JS前端分页条，支持前端，后台分页
12-13
JQ编写的一个简单分页条，样式，页面，JS分离，改写代码简单，使用方便。
前端分页css与js
02-19
该资源包含有pagination.css与pagination.js,使用分页可以快速的完成分页
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
前端翻页样式
︶￣城南花已开
08-31 948
html &lt;div class="pagination"&gt; &lt;span class="disabled" title="首页"&gt;首页&lt;/span&gt; &lt;span class="disabled" title="上一页"&gt;上一页&lt;/span&gt; &lt;span cl
前端实现分页效果
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
基于LayUI实现前端分页功能的方法
12-11
本文将详细介绍如何利用LayUI这个国产前端UI框架实现前端分页功能。 LayUI是一款易于使用的框架，它遵循HTML/CSS/JS的原始编写方式，对开发者非常友好，无需额外学习复杂的新规范。LayUI提供了丰富的元素和组件，...
新手学习可前端分页，前端分页，简单的前端分页，html分页，html前端分页
07-13
对于新手来说，理解并实现前端分页是掌握Web开发技能的重要一步。本文将深入探讨前端分页的概念、实现原理以及如何通过HTML和JavaScript进行简单实现。 前端分页，顾名思义，是在客户端（用户的浏览器）进行数据的...
layUI实现前端分页和后端分页
10-16
layUI是一个优秀的前端组件库，提供了丰富的UI元素和便捷的API，包括前端分页和后端分页的实现。本篇将详细介绍如何使用layUI来实现这两种分页方式。 **前端分页** 前端分页是指在浏览器端进行数据的分块加载，通常...
vue实现前端分页完整代码
10-15
在这个问题中，我们讨论的是如何在Vue应用中实现前端分页功能。前端分页意味着在客户端处理分页逻辑，而不是在服务器端。这通常适用于数据量较小或实时更新需求不高的场景。 首先，让我们分析给出的代码片段。这个...
前端实现大文件分片下载
最新发布
mamapya的博客
04-14 2033
项目中经常遇到下文件下载的情况，网速差的情况下很影响用户体验，可以利用HTTP Renge将文件分若干份并发下载
前端如何实现分页？
m0_50441807的博客
06-06 2万+
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量） 分页的思路：把所有的数据请求回来后，通过来进行截取每一页的数据；假设当前页是，，那么应该从开始截取，到结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；......
JavaScrip实现前端列表分页
热门推荐
qq_31258245的博客
12-25 2万+
在一些网站的管理系统中，通常的查询功能会有很多信息，这时候前端如果不分页显示，那么浏览器的长度就会很长。所以通常要进行分页处理。     对于分页主要有两种方法，第一种方法有后台来进行分页，前端通过请求后台传入分页所需的参数来使后台返回响应的分页结果。第二种方法是有前台来进行分页，后台一次性返回全部结果，前端对这些结果进行分页显示处理。     下面主要是实现的一个前端分页的效果，先上几张效果图
大量数据情况下前端分页处理
luuu7的博客
07-30 7202
前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当时想到的方案大致如下: 采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表) 懒加
分页页码的前端显示的实现
bobbyzyl12的博客
08-16 1万+
分页页码的前端
前端分片下载大文件
snowflakelm的博客
08-25 5419
前端请求后端服务下载安装包等大文件时请求超时，由于文件大小不定无法通过修改超时时间解决；并且文件过大时接口请求时间长，页面无法查看请求进度，用户无法看到是否已经在下载文件。
前端分页和后端分页
baidongying的博客
07-19 1万+
前端分页和后端分页区别
前端分页原理
马优晨
08-24 2344
这里讲解一下滚动分页的常用的两种方法： 方法一： &lt;script type="text/javascript"&gt; var page = 2; //当前页的页码 var flagNoData = false; //false var allpage = @Model.PageCount; //总页码，会从后台获取 fun...
前端实现分页
aoshiyunlong的博客
08-01 2万+
在开发过程中我遇到这么一个需求我曾经遇到过这个需求，后台说数据分页麻烦，哎没办法这个公司就我和他搞技术的，要是有项目经理肯定不允许后台这么搞，无论数据量大不大， 前端采用的是Vue + ElementUi 下面这是父组件的需要代码 <!--html代码--> <template> <paging class="page" :totalCount=...
js分页实现，前端实现
qq_43682438的博客
11-13 9776
js分页实现，前端实现
使用jQuery实现前端分页功能详解
然而，本文将介绍一种基于jQuery的前端分页实现方法，虽然没有进行封装，但足以理解其工作原理。 首先，我们需要定义一个分页方法`paginationNick`，这个方法将在整个分页过程中被多次调用。在这个方法内部，我们将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值