<!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. 去除安卓apk中的广告

    一般来说,安卓应用很多免费的apk都是有广告的.尽管我们要坚持尊重开发者,帮帮他们点击广告赚钱来可持续发展,但是有的时候,很多游戏中游戏实在是太影响感觉了,当找不到汉化破解版本的时候,也许需要亲自把它 ...

  2. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  3. 使用.Net Core RT 标准动态库

    这个文档可以引导你如何通过CoreRT生成一个原生标准的系统动态库让其他编程语言调用. CoreRT 可以构建静态库, 这些库可以在编译时链接或者也可以构建运行时所需的共享库, 创建一个支持CoreR ...

  4. javeee 字节Buffered

    package Zy; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io. ...

  5. Django的Error汇总

    title: Django学习笔记 catalog: true subtitle: 11. Django_Error汇总 date: 2018-12-14 10:17:28 --- Django的Er ...

  6. Python【每日一问】35

    问: 基础题: 从键盘输入4个数字,各数字采用空格分隔,对应为变量x0,y0,x1,y1.计算(x0,y0)和(x1,y1)两点之间的距离,输出结果保留1位小数. 比如,键盘输入:0 1 3 5,屏幕 ...

  7. [POI2005]SKA-Piggy Banks tarjan 水题

    Code: #include<bits/stdc++.h> #define maxn 1000002 using namespace std; void setIO(string s) { ...

  8. BZOJ 1577: [Usaco2009 Feb]庙会捷运Fair Shuttle 线段树 + 贪心

    escription 公交车一共经过N(1<=N<=20000)个站点,从站点1一直驶到站点N.K(1<=K<=50000)群奶牛希望搭乘这辆公交车.第i群牛一共有Mi(1&l ...

  9. 配平化学方程式的C++代码实现

    配平化学方程式的C++代码实现 纪念一下我今天写过了 20171006. (去年的这个时候我就有了这个大胆的想法, 当时的思路是:字符串处理->暴力搜系数,可是太年轻写不对,我那会还是个只会模拟 ...

  10. 最佳实践 | 源码升级gcc

    1.下载升级包所需软件 boost_1_60_0.tar.gz http://www.boost.org/users/history/version_1_60_0.html gcc-4.8.0.tar ...