<!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. CVPR2015深度学习回顾

    原文链接:http://www.csdn.net/article/2015-08-06/2825395 本文做了少量修改,仅作转载存贮,如有疑问或版权问题,请访问原作者或告知本人. CVPR可谓计算机 ...

  2. Memcached 之增删改查命令

    memcache是高性能 ,分布式的内存对象缓存系统,非关系型数据库. 一.增 语法:add  key  flag  expire  length key:值的一个名字 flag:一个标志,是一个正整 ...

  3. VS 2017 统计项目代码总行数

    编辑 → 查找和替换 → 在文件中的查找,打开查找窗口 填入正则表达式  ^b*[^:b#/]+.*$ 查找范围选“整个解决方案”,勾选上“使用正则表达式” 如果要限制文件类型,就填上要查找的文件类型 ...

  4. xpath定位实列

    这次将讲Xpath定位! 什么是Xpath: Path就是路径,xpath也类似,就像 在DOS中 D:\Auto\jack. Xpath的使用: 1:在火狐下载 FirePath 插件(图1),然后 ...

  5. Linux挂载NAS共享文件夹

    [root@ftp:/mnt] > mount -o username=user01,password=1234567890 //192.168.31.20/share /mnt/nas [ro ...

  6. AtCoder ARC 076E - Connected?

    传送门:http://arc076.contest.atcoder.jp/tasks/arc076_c 平面上有一个R×C的网格,格点上可能写有数字1~N,每个数字出现两次.现在用一条曲线将一对相同的 ...

  7. 1.3 eclipse中配置Tomcat

    下载并成功安装Eclipse和Tomcat():   打开Eclipse,单击“window”菜单,选择下方的“Preferences”: 步骤阅读 3 找到Server下方的Runtime Envi ...

  8. Leetcode 887 Super Egg Drop(扔鸡蛋) DP

    这是经典的扔鸡蛋的题目. 同事说以前在uva上见过,不过是扔气球.题意如下: 题意: 你有K个鸡蛋,在一栋N层高的建筑上,被要求测试鸡蛋最少在哪一层正好被摔坏. 你只能用没摔坏的鸡蛋测试.如果一个鸡蛋 ...

  9. 权值线段树&线段树合并

    权值线段树 所谓权值线段树,就是一种维护值而非下标的线段树,我个人倾向于称呼它为值域线段树. 举个栗子:对于一个给定的数组,普通线段树可以维护某个子数组中数的和,而权值线段树可以维护某个区间内数组元素 ...

  10. Co-prime

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Problem ...