前端分页小组件的实现，可分页前端数据

短命女 2023-09-27 18:36 116阅读 0赞

> 前端

<table id="show" border="1px" cellpadding="10px">
    </table>
    <div class="page">
        </div>

> js

var  outshow ="";
    let itableEl = document.querySelector("#show");
    function gopage(pno, psize) {
          //翻页
    $.ajax({
        
            url: "http://localhost:【端口】/search/all",
            type: "get",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",  //设置请求为json格式，中文的为utf-8
            success: function (result){
           //后端返回的数据
               itableEl.innerHTML=result;
             },
             Error: function () {
        
                window.alert("查询发生错误~");
            }
             })
        /**
        分页组件的实现
        */
        //计算行数
        let rowsNumber = itableEl.rows.length;
        //计算分多少页
        let pages = (rowsNumber / psize) > parseInt(rowsNumber / psize) ? parseInt(((rowsNumber / psize) + 1)) : parseInt(rowsNumber / psize);
        //当前显示的数据(数据显示的第一行，最后一行所在的位置)
        let startRow = (pno - 1) * psize + 1;
        let endRow = pno * psize > rowsNumber ? rowsNumber : pno * psize;
        //分页框
        let pageBoxEl = document.querySelector(".page");
    
        //遍历，如果数据在当前页，否则就隐藏
        for (let i = 1; i <= rowsNumber; i++) {
        
            if (i >= startRow && i <= endRow) {
        
                itableEl.rows[i - 1].style.display = 'block'; //行的展示
            } else {
        
                itableEl.rows[i - 1].style.display = 'none';// 行的隐藏
            }
        }
        //分页按钮
        //如果当前在第一页，则第一页和首页将以链接形式显示(可以提供给用户进行点击，并可切换页数),
        // 否则只能进行文本形式显示
        let temStr = "当前共" + rowsNumber + "条数据,分" + pages + "页显示，当前在第" + pno + "页";
        if (pno > 1) {
        
            temStr += '<a href="#" onClick="gopage(' + 1 + ',' + psize + ')">首页</a><a href="#" onClick="gopage(' + (pno - 1) + ',' + psize + ')">第一页</a>'
        } else {
        
            temStr += '首页 <第一页';
        }
    
        if (pno < pages) {
        
            temStr += ',<a href="#" onClick="gopage(' + (pno + 1) + ',' + psize + ')">下一页 ></a><a href="#" onClick="gopage(' + pages + ',' + psize + ')">尾页</a>'
        } else {
        
            temStr += '第一页> 尾页';
        }
        pageBoxEl.innerHTML = temStr;
    }
    //开始情况时，初定值显示第一页，每页设置为5条数据
    function enter () {
        
        gopage(1, 5);
    }

> 这样就可以实现基本的一个分页功能

![实现功能][503e7dc4c40e4f5ebfe6ed1ef1b06dba.png]

> 最后希望可以帮到你

[503e7dc4c40e4f5ebfe6ed1ef1b06dba.png]: https://img-blog.csdnimg.cn/503e7dc4c40e4f5ebfe6ed1ef1b06dba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关前端分页处理

页面中实现的分页效果，要么后端提供接口，每次点击下一页就调用接口，若不提供接口，分页得前端自己去截取。 ![3e1ca6558f0847d9a0da9685df40cc8b.

淩亂°似流年/ 2024年03月31日 17:16/ 0 赞/ 109 阅读

相关前端实现分页效果

前言在实际开发中，大部分分页都是配合后端完成的。但是，有时候并不是这样，并非不是这样。后端会一次性返回所有的数据，而我们前端不可能展示所有数据，而是弄一个分页效果。还有

末蓝、/ 2023年10月13日 10:09/ 0 赞/ 44 阅读

相关通用分页（前端）

目录什么是 Eclipse debug调试？ eclipse中debug调试一.分页核心思想核心思想二.通用分页优化 1.PageBean的封装类代码：

川长思鸟来/ 2023年10月13日 04:56/ 0 赞/ 18 阅读

相关前端分页（vue前端分页，el分页，el-pagination分页，饿了吗分页）

简述：作为一名前端开发者，分页功能我们经常会用到，但有时候后端会把数据一次性给我们，需要我们自己处理数据，做前端分页，下面给大家介绍如何实现，其实很简单，就是使用数组的sli

缺乏、安全感/ 2023年10月04日 21:52/ 0 赞/ 79 阅读

相关前端分页小组件的实现，可分页前端数据

> 前端  <table id="show" border="1px" cellpadding="10px"> </table>

短命女/ 2023年09月27日 18:36/ 0 赞/ 117 阅读

相关 vxetable实现前端分页

直接上代码吧 <template> <div> <page-wraper> <a-modal

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:50/ 0 赞/ 224 阅读

相关前端---原生JS实现分页

<html> <head> <title>原生js分页插件</title> <style> /

叁歲伎倆/ 2022年11月29日 00:54/ 0 赞/ 187 阅读

相关 easyUI 分页前端分页与后端分页

前端分页初始化datagrid时加上Filter $('tabL'+currentCatalogId).datagrid({ loadFilter: pa

心已赠人/ 2022年05月19日 06:07/ 0 赞/ 412 阅读

相关 JS实现前端分页

一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'>

Bertha 。/ 2022年02月19日 17:17/ 0 赞/ 339 阅读

相关 elementUI实现前端分页

　　按照他的文档来写分页，最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((c

╰+攻爆jí腚メ/ 2021年12月23日 16:17/ 0 赞/ 367 阅读