<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载</title>

<style>
#page a{
margin:0 10px;
color: #999;
}
#page a.active{
color:#0000ee;
}
</style>
</head>
<body>
<div class="pagination-nick">

<div id="list"></div>
<div id="page"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var pager = {
pageIndex:1,//当前页码
pageCount:10,//每页显示多少条数据
pageMax:0,//数据有一共多少页

}
var obj={other:{},value:[11,21,31,41,51,61,71,81,91,1,12,22,32,42,52,62,72,82,92,2,13,23,33,43,53,63,73,83,93,3,14,24,34,44,54,64,74,84,94,4,99999999999]};//模拟数据

$(function(){

//一共有多少页
pager.pageMax=obj.value.length % pager.pageCount?parseInt(obj.value.length / pager.pageCount)+1:obj.value.length / pager.pageCount;
var btnBox='';

//循环出多少页
btnBox+='<a href="javascript:;" data-type="first">首页</span><a href="javascript:;" data-type="nextPage">下一页</a>'
for(var i=1;i<=pager.pageMax;i++){
var j =i;
btnBox+='<a href="javascript:;" data-type="'+j+'">'+j+'</a>'
}
btnBox+='<a href="javascript:;" data-type="firstPage">上一页</a><input type="number" value="1" class="int" placeholder="1"><button class="btn-yes">确定</button><a href="javascript:;" data-type="last">尾页</a>'
console.log(pager.pageMax)

$('#page').html(btnBox)
$('#page a:nth-child(3)').addClass('active')
listBox(1);
//页码选中

//点击页数获取数据
$('#page a').on('click',function(){

var num= $(this).attr('data-type')
if(!isNaN(num)){
listBox(num)
pager.pageIndex=Number(num)//unm是字符串，要转为数字类型

}else{
switch(num){
case 'first':listBox(1);//首页
pager.pageIndex=1
break;
case 'last':listBox(pager.pageMax);//尾页
pager.pageIndex=pager.pageMax
break;
case 'nextPage'://下一页
if(pager.pageIndex < pager.pageMax){
console.log(typeof(pager.pageIndex))
listBox(pager.pageIndex+1)
pager.pageIndex=pager.pageIndex+1
console.log(pager.pageIndex)
}
break;
case 'firstPage'://上一页
if(pager.pageIndex > 1){
listBox(pager.pageIndex-1)
pager.pageIndex=pager.pageIndex-1
}
break;
}
}

pageNum()
$('.int').val(pager.pageIndex)

})

//填写页数搜索
$('.btn-yes').on('click',function(){
if($('.int').val()){

if($('.int').val()<1){
listBox(1)
pager.pageIndex=1
$('.int').val(1)
}else if($('.int').val()>pager.pageMax){
listBox(pager.pageMax)
pager.pageIndex=pager.pageMax
$('.int').val(pager.pageMax)
}else{
listBox($('.int').val())
pager.pageIndex=$('.int').val()
}
}
pageNum()
})

})

//选中页码

function pageNum(){
$('#page a').each(function(){

if($(this).attr('data-type')==pager.pageIndex){
$(this).addClass('active').siblings().removeClass('active')
}
})
}
//列表
function listBox(numIndex){

var numList=numIndex * pager.pageCount>obj.value.length?obj.value.length:numIndex * pager.pageCount;//循环到的数据
var numNext=(numIndex-1) * pager.pageCount//从那条数据开始循环
console.log(numNext)
console.log(numList)
var xhtml='';

for(var i=numNext;i<numList;i++){

xhtml+='<li>'+obj.value[i]+'</li>'
}
console.log(xhtml)
$('#list').html(xhtml);
}
</script>
</body>
</html>

前端分页功能实现（PC）的更多相关文章

  1. python2.0_day19_前端分页功能的实现

    我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我 ...

  2. 基于layUI实现前端分页功能

    一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...

  3. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

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

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  5. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  6. jPList – 实现灵活排序和分页功能的 jQuery 插件

    jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...

  7. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  8. 夺命雷公狗---DEDECMS----33dedecms自定义搜索以及分页功能完成

    我们现在要开始实现模版里面的搜索功能了,我们先找要做出一个检索提交表单,如下所示: 只要我们点击生成之后我们的表单就获取到了,可以直接拿生成好的html表单拿来用来测试下.. 将他嵌入首页的模版文件, ...

  9. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

随机推荐

  1. 使用DOM解析XML文档

    简单介绍一下使用DOM解析XML文档,解析XML文件案例: <?xml version="1.0" encoding="UTF-8"?> -< ...

  2. 【原创】redhat5安装oracle10g

    安装缺失的包: 用 root 用户身份运行以下命令: rpm -q gcc make binutils openmotif setarch compat-db compat-gcc compat-gc ...

  3. 请不要继续使用VC6.0了！

    很多次和身边的同学交流,帮助同学修改代码,互相分享经验,却发现同学们依然在使用老旧的VC6.0作为编程学习的软件,不由得喊出:“请不要继续使用VC6.0了!”. VC6.0作为当年最好的IDE(集成开 ...

  4. jstl与el结合常见用法

    JSTL Functions标签库 在JSP文件中使用Functions标签库,要先通过taglib指令引入该标签库: <%@taglib uri=”http://java.sun.com/js ...

  5. 【转载】CentOS 安装rz和sz命令 lrzsz

    lrzsz在linux里可代替ftp上传和下载.lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZMode ...

  6. 【转载】servlet三大作用域：request，session，application

    javaweb开发中Servlet三大域对象的应用(request.session.application(ServletContext)). 1. requestrequest是表示一个请求,只要发 ...

  7. 面试官问你：MYSQL事务和隔离级别，该如何回答

    一.事务 事务是由一组SQL语句组成的逻辑处理单元,是满足 ACID 特性的一组操作,可以通过 Commit 提交一个事务,也可以使用 Rollback 进行回滚.事务具有以下4个属性,通常简称为事务 ...

  8. eas之获得任何一个KDTable的选中行

    import com.kingdee.bos.ctrl.kdf.table.util.KDTableUtil; int[] selectRows =KDTableUtil.getSelectedRow ...

  9. 利用perf排查sys高的问题

    思路 perf top perf record -C 44,48,60,63 -g -o a.data perf report -i a.data --call-graph 查看调用链,可以确定,基本 ...

  10. Perl PPM安装模块

      介绍一下如何使用PPM(Perl Package Manager)安装模块(必须安装了ActivePerl).打开PPM,我们看到的界面是这样的: 我们看到第二行是工具栏,从左到右,第一个是查看仓 ...