前端的一个分页写法

最新推荐文章于 2023-08-28 11:41:21 发布
最新推荐文章于 2023-08-28 11:41:21 发布
阅读量87 收藏
点赞数
文章标签： 前端 xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/yexuelaoren/p/6090358.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的分页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var pageArray = [];

    var liCount = $('li').length;//获取获取记录条数
    var PageSize  = 10;//设置每页，你准备显示几条
    var PageCount  = Math.ceil(liCount/PageSize);//计算出总共页数
    var currentPage = 1;//设置当前页
    
    var i=0;
    for(i=1; i<=PageCount; i++){
        $('<a href="#" pageNum="'+i+'" >第'+i+'页</a>').appendTo('#pageIt');//显示分页按钮
    }
    
    var $li =  $('li');
    $li.each(function(){
        pageArray.push(this);
    });
    
    for(i=0;i<10;i++){
        $('#pagingList').append(pageArray[i]);
    }
    
    function showPage(whichPage){
        $('#pagingList').html('');
        for(i = (whichPage-1)*10; i < 10*whichPage ; i++){
            $('#pagingList').append(pageArray[i]);
        }
    }
    var a;
    $('a').click(function(){
        a = $(this).attr('pagenum');
        showPage(a);
    })
    
    debugger;
});
</script>
</head>

<body>
<div id="pageIt" ></div>
<div id="pagingList"></div>
<br /><br /><br /><br /><br />
<ul id="list" >

<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>

<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>

<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>

<li class="gg">帅哥F</li>
<li class="mm">美女G</li>
<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>

<li class="mm">美女C</li>
<li class="gg">帅哥C</li>
<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="mm">美女G</li>

<li class="gg">帅哥G</li>
<li class="mm">美女H</li>
<li class="gg">帅哥H</li>
<li class="mm">美女A</li>
<li class="gg">帅哥A</li>
<li class="mm">美女B</li>
<li class="gg">帅哥B</li>
<li class="mm">美女C</li>
<li class="gg">帅哥C</li>

<li class="mm">美女D</li>
<li class="gg">帅哥D</li>
<li class="mm">美女E</li>
<li class="gg">帅哥E</li>
<li class="mm">美女F</li>
<li class="gg">帅哥F</li>
<li class="gg">帅哥G</li>
<li class="gg">帅哥H</li>
<li class="gg">帅哥G</li>

</ul>
</body>
</html>

 

转载于:https://www.cnblogs.com/yexuelaoren/p/6090358.html

weixin_30328063
关注
mybatis分页绝对路径写法过程详解
08-25
pagehelper是一个非常流行的MyBatis分页插件，它提供了许多强大的功能，可以轻松地实现分页功能。我们可以使用Maven来下载pagehelper的jar包，坐标为： <groupId>com.github.pagehelper</groupId> <artifactId>...
工作这么久了，还不懂如何使用纯前端实现分页吗？-假如后端一股脑返回给你所有数据，让你自个实现分页该怎么办
商务合作 / 项目定制开发 / 前端一对一培训、答疑
06-28 3069
因为后端返回给你的数据，你一般会整个存放在一个数组中，要显示第一页，其实就是在该数组中分割提取下标为0-9的数据项，如果是第三页，则在该数组中提取第20-29的数据项，创建一个计算属性，在该计算属性中完成数据的提取，再给到视图即可。有这么个场景，后端接口的列表数据没有做分页给我，相当于是直接返回所有的列表数据，比如有100条就返回100，但是前端显示，则需要做成分页，比如10条为一页。框架，其实也很好办，主要是记住以上前端分页的思路：找到某一页的开始下标和结束下标，然后去分割数组，返回给视图。
前端分页处理
最新发布
m0_71349739的博客
08-28 1574
如data:[1,2,3,4,5,6,7,8]，那么data.splice(0,3)就是从第0位开始，删除3个元素，即删除的元素为[1,2,3]，剩余元素为data:[4,5,6,7,8]，此方法会改变原数组。如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3)比如：data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
前端如何实现分页？
热门推荐
m0_50441807的博客
06-06 2万+
先定义分页中需要用的三个值：currentPage（当前页码）、total（总条数）、pageSize（每页展示的数据量） 分页的思路：把所有的数据请求回来后，通过来进行截取每一页的数据；假设当前页是，，那么应该从开始截取，到结束，自己验证下，找到这样的规律后，就可以截取每一页的数据了；......
前端实现分页功能
Guoxuzzz的博客
09-05 2666
前端解决分页问题
前端分页(详细步骤)
naoguaten的博客
12-22 1万+
一、思路 1.设置全局变量，当前页，总页数，总条数，每页显示多少条，所有页数据，当前页数据，start（总数据开始截取位置）、end（总数据结束截取位置） 2.调用接口，请求到所有的数据后，改变相应的全局变量 3.通过对总数据进行filter过滤得到当前页数据，然后把数据渲染到表格上， 4.其他操作：如页码的点击、左右箭头的点击都会改变当前页的内容，就是改变相应全局变量，然后重新过滤当前页数据，然后进渲染到页面上 二、具体步骤 1.定义变量 //当前页 let nowPage = 1 // 每页显示多少条
yii框架搜索分页modle写法
10-20
在控制器中，我们会实例化一个模型来接收和处理数据。为了实现搜索和分页，需要进行以下几个步骤： 1. 接收搜索条件：在控制器动作中，通过`yii::$app->request->get('goods_name')`获取前端传来的搜索参数。 2. ...
JAVA JAP分页写法大全
03-30
这个压缩包文件名"JAVA JAP分页写法大全"暗示了它可能包含各种不同的分页实现示例，这对于初学者来说是一个极好的学习资源。下面我们将详细探讨Java中常见的分页方法。 首先，我们要理解分页的基本概念。在处理大量...
YII框架中搜索分页jQuery写法详解
10-20
之后，实例化一个`Pagination`对象来设置分页参数，包括总数据量和每页显示的数据条数。通过`$query->offset($pagination->offset)->limit($pagination->limit)`实现分页查询，并最终将查询结果和分页信息传递给视图...
分页小插件
11-10
"分页小插件"是一个专为此目的设计的小工具，它可以轻松地集成到项目中，提供多种分页方法，使得数据管理更加便捷高效。 分页的实现方法有很多种，常见的有前端分页和后端分页： 1. **前端分页**：前端分页是指在...
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 2790
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
前端实现分页
qq_45136544的博客
04-23 8620
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
html 前端分页代码怎么写,前端js写分页
weixin_28747257的博客
06-19 2370
一个朋友要写分页 问我怎么写我就给写了一个demo感兴趣的可以参考下一共三个文件 page.js page.html index.json这三个文件要放在同一个目录下 这里面有ajax请求所以必须放在项目下page.htmlDocument*{margin:0;padding:10px;}ul,li{list-style:none;}li{border-bottom:1px solid #...
通用分页的前端实现
qq_63492318的博客
06-24 743
通用分页前端的实现、封装分页标签
前端写分页
weixin_33759269的博客
11-14 350
//连接终端 var pageNumber=1;//当前页 var sumCount=0;//连接终端 var numCount=0; //故障详情 var pageSize=10;//一夜共显示的总页数 function connTermial(hostId,pageNumber,pageSize){//连接终端 $.ajax({ url:url, type:'post', ...
前端分页和后端分页
baidongying的博客
07-19 1万+
前端分页和后端分页区别
html 前端分页代码怎么写,纯JavaScript实现的前端分页代码
weixin_42395985的博客
06-19 1448
最近我遇到问题，就是控制table表格的行不要太长，这里最简单方便的方法就是用前端分页，控制表格显示的行数，在网上找了一番，终于找到一个比较合适的前端分页代码。示例如下：html代码：//全局变量var numCount; //数据总数量var columnsCounts; //数据列数量var pageCount; //每页显示的数量var pageNum; ...
分页页码的前端显示的实现
bobbyzyl12的博客
08-16 1万+
分页页码的前端
前端JS实现分页与请求处理示例
在这个示例中，我们看到`index.html`文件包含了基本的HTML结构，定义了一个表格样式的列表，用于显示数据，并有一个分页导航栏。`css/public.css`可能包含了对这些元素的样式定义，但具体内容未给出。 JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值