前端分页功能的实现以及原理（jQuery）

2024-12-23 09:17:59

分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现，前端请求就完事了。现闲得无聊，就写出来玩玩，只实现功能，并未封装。

基于jq实现分页功能，大致分为以下几步：

定义一个分页方法，可多次调用
参数设置
请求数据页面跳转方法
创建非数字按钮和数据内容区
创建数字按钮
首屏加载
调用

结构层只需要一个容器

<div class="pagination-nick"></div>

一、定义分页方法

function paginationNick(opt){
//code
}

二、参数设置

几个必填的容器class，和几个可以修改的默认数据参数

var pager={
 paginationBox:'',//分页容器-- 必填
 mainBox:'',//内容盒子--必填
 numBtnBox:'',//数字按钮盒子-- 必填
 btnBox:'',//按钮盒子 --必填
 ipt:'',//input class-- 必填
 goBtn:'',//go btn class --必填
 currentBtn:'',//当前按钮class name --必填
 pageCount:5,//每页显示几条数据
 numBtnCount:3,//当前页左右两边各多少个数字按钮
 currentPage:0,//当前页码data-page，首屏默认值
 maxCount:0,//ajax请求数据分成的最大页码
 data:[]//ajax请求的数据
 };
 pager = $.extend(pager,opt);

三、请求数据页面跳转方法

创建所有的按钮时都用了自定义属性data-page保留要跳转的页码信息，调用时将此属性作为参数用于跳转页面判断。

function goPage(btn){
//code
}

obj为ajax请求数据（用于模拟）

var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};

将展示的数据赋值给pager.data (array)

pager.data=obj.value;

设置ajax请求数据分成的最大页码

pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
pager.data.length / pager.pageCount;

设置当前页码

if(!isNaN(btn)){//数字按钮
  pager.currentPage=parseInt(btn);
 }else{
  switch(btn){
  case 'first':
  pager.currentPage=0;
  break;
  case 'prev':
  if(pager.currentPage>0){
  --pager.currentPage;
  }
  break;
  case 'next':
  if(pager.currentPage+1<pager.maxCount){
  ++pager.currentPage;
  }
  break;
  case 'last':
  pager.currentPage=pager.maxCount-1;
  break;
  }
 }

创建数字按钮

createNumBtn(pager.currentPage);

赋值给页码跳转输入框的value，表示当前页码

$('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);

内容区填充数据

var arr=[],str='';
 arr=pager.data.slice(pager.pageCount*pager.currentPage,
  pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
  pager.pageCount*(pager.currentPage+1) : pager.data.length);
 arr.forEach(function(v){
  str+='<div>'+v+'</div>';
 });
 $('.'+pager.mainBox).html(str);

四、创建非数字按钮和数据内容区

 function createOtherBtn(){
//code
}

内容填充

$('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class="'+pager.mainBox+'"></div>');

监听ipt value变化并赋值给go btn data-page

$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
  if(!isNaN($(this).val())){//是数字
  　　　　　　　　if($(this).val() > pager.maxCount){//限制value最大值，跳转尾页
  　　　　　　　　　$(this).val(pager.maxCount);
  }
  if($(this).val()<1){//限制value最小值，跳转首页
  $(this).val(1);
  }
  }else{//非数字清空value
  $(this).val('');
  }
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
 });

每个btn绑定请求数据页面跳转方法

$('.'+pager.btnBox+' button').each(function(i,v){
 $(this).click(function(){
  //有值且不是上一次的页码时才调用
  if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
  goPage(v.getAttribute('data-page'));
  }
  });
 });

五、创建数字按钮

 function createNumBtn(page){
//code
}

创建数字按钮区

将数字按钮区分成当前页左右2边分析，需要注意的地方都加注释了

var str='';
 if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
  //此页左边右边各pager.numBtnCount个数字按钮
  if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页 page页码从0开始
  for(var m=pager.numBtnCount;m>0;m--){
  str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
  }
  }else{
  for(var k=0;k<page;k++){
  str+='<button data-page="'+k+'">'+(k+1)+'</button>';
  }
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始
  for(var j=1;j<pager.numBtnCount+1;j++){
  str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
  }
  }else{
  for(var i=page+1;i<pager.maxCount;i++){
  str+='<button data-page="'+i+'">'+(i+1)+'</button>';
  }
  }
  /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
  这个分支，可以省略*/
  if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
 str='';
 if(page<pager.numBtnCount){//此页左边页码少于固定按钮数时
  for(var n=0;n<page;n++){//此页左边
  　　str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
  　　 str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
  }
 　　if(pager.maxCount-page-1<pager.numBtnCount){
  　　　　for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
  　　　　　　str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var z=page+1;z<pager.maxCount;z++){//此页右边
  　　 str+='<button data-page="'+z+'">'+(z+1)+'</button>';
  }
  }
  }
 }else{
  str='';
  for(var n=0;n<page;n++){//此页左边
  　　　　　str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
 str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var x=1;x<pager.maxCount-page;x++){//此页右边
  　　　　str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
 }
 $('.'+pager.numBtnBox).html(str);

每个btn绑定请求数据页面跳转方法

 $('.'+pager.numBtnBox+' button').each(function(i,v){
  $(this).click(function(){
  goPage(v.getAttribute('data-page'));
  });
 });

按钮禁用

$('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
 if(!page){//首页时  　　　　　　$('.'+pager.btnBox+' .first-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
 }
 if(page==pager.maxCount-1){//尾页时
  　　　　　　$('.'+pager.btnBox+' .last-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
 }

六、首屏加载

 createOtherBtn();//首屏加载一次非数字按钮即可
 goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage

七、调用

paginationNick({
 paginationBox:'pagination-nick',//分页容器--必填
 mainBox:'main-box-nick',//内容盒子--必填
 numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
 btnBox:'btn-box-nick',//按钮盒子 --必填
 ipt:'page-ipt-nick',//input class-- 必填
 goBtn:'go-btn-nick',//go btn class --必填
 currentBtn:'active-nick'//当前按钮class name --必填
 });

需要注意的地方，注释都加上了！

完整代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>pagination-nick</title>
 <style>
 button{
 padding:5px;
 margin:5px;
 }
 .active-nick{
 color:red;
 }
 input{
 width:50px;
 text-align:center;
 }
 </style>
</head>
<body>
 <div class="pagination-nick"></div>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
// 定义一个分页方法，可多次调用
 function paginationNick(opt){
// 参数设置
 var pager={
 paginationBox:'',//分页容器-- 必填
 mainBox:'',//内容盒子--必填
 numBtnBox:'',//数字按钮盒子-- 必填
 btnBox:'',//按钮盒子 --必填
 ipt:'',//input class-- 必填
 goBtn:'',//go btn class --必填
 currentBtn:'',//当前按钮class name --必填
 pageCount:5,//每页显示几条数据
 numBtnCount:3,//当前页左右两边各多少个数字按钮
 currentPage:0,//当前页码data-page，首屏默认值
 maxCount:0,//ajax请求数据分成的最大页码
 data:[]//ajax请求的数据
 };
 pager = $.extend(pager,opt);
 //请求数据页面跳转方法
 function goPage(btn){
 //obj为ajax请求数据
 var obj={other:{},value:[11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0,11,22,33,44,55,66,77,88,99,0]};
 //将展示的数据赋值给pager.data (array)
 pager.data=obj.value;
 //设置ajax请求数据分成的最大页码
 pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
  pager.data.length / pager.pageCount;
// 设置当前页码
 if(!isNaN(btn)){//数字按钮
  pager.currentPage=parseInt(btn);
 }else{
  switch(btn){
  case 'first':
  pager.currentPage=0;
  break;
  case 'prev':
  if(pager.currentPage>0){
  --pager.currentPage;
  }
  break;
  case 'next':
  if(pager.currentPage+1<pager.maxCount){
  ++pager.currentPage;
  }
  break;
  case 'last':
pager.currentPage=pager.maxCount-1;
  break;
  }
 }
 //创建数字按钮
 createNumBtn(pager.currentPage);
 //赋值给页码跳转输入框的value，表示当前页码
 $('.'+pager.btnBox+' .'+pager.ipt).val(pager.currentPage+1);
// 内容区填充数据
 var arr=[],str='';
 arr=pager.data.slice(pager.pageCount*pager.currentPage,
  pager.data.length - pager.pageCount*(pager.currentPage+1) > -1 ?
  pager.pageCount*(pager.currentPage+1) : pager.data.length);
 arr.forEach(function(v){
  str+='<div>'+v+'</div>';
 });
 $('.'+pager.mainBox).html(str);
 }
 //创建非数字按钮和数据内容区
 function createOtherBtn(){
 $('.'+pager.paginationBox).html('<div class="'+pager.btnBox+'"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="'+pager.numBtnBox+'"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="'+pager.ipt+'"><button class="'+pager.goBtn+'">确定go</button><button data-page="last" class="last-btn">尾页</button></div><div class="'+pager.mainBox+'"></div>');
 //ipt value变化并赋值给go btn data-page
$('.'+pager.btnBox+' .'+pager.ipt).change(function(){
  if(!isNaN($(this).val())){//是数字
  if($(this).val() > pager.maxCount){//限制value最大值，跳转尾页
  $(this).val(pager.maxCount);
  }
  if($(this).val()<1){//限制value最小值，跳转首页
  $(this).val(1);
  }
  }else{//非数字清空value
  $(this).val('');
  }
$('.'+pager.btnBox+' .'+pager.goBtn).attr('data-page',$(this).val() ? $(this).val()-1 : '');
 });
 //每个btn绑定请求数据页面跳转方法
 $('.'+pager.btnBox+' button').each(function(i,v){
  $(this).click(function(){
  //有值且不是上一次的页码时才调用
  if(v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage){
  goPage(v.getAttribute('data-page'));
  }
  });
 });
 }
 //创建数字按钮
 function createNumBtn(page){
 //page是页面index从0开始，这里的page加减一要注意
 var str='';
 if(pager.maxCount>pager.numBtnCount*2){//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
  //此页左边右边各pager.numBtnCount个数字按钮
  if(page-pager.numBtnCount>-1){//此页左边有pager.numBtnCount页 page页码从0开始
  for(var m=pager.numBtnCount;m>0;m--){
  str+='<button data-page="'+(page-m)+'">'+(page-m+1)+'</button>';
  }
  }else{
  for(var k=0;k<page;k++){
  str+='<button data-page="'+k+'">'+(k+1)+'</button>';
  }
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  if(pager.maxCount-page>3){//此页右边有pager.numBtnCount页 page页码从0开始
  for(var j=1;j<pager.numBtnCount+1;j++){
  str+='<button data-page="'+(page+j)+'">'+(page+j+1)+'</button>';
  }
  }else{
  for(var i=page+1;i<pager.maxCount;i++){
  str+='<button data-page="'+i+'">'+(i+1)+'</button>';
  }
  }
  /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
  这个分支，可以省略*/
  if(str.match(/<\/button>/ig).length<pager.numBtnCount*2+1){
  str='';
  if(page<pager.numBtnCount){//此页左边页码少于固定按钮数时
  for(var n=0;n<page;n++){//此页左边
  str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var x=1;x<pager.numBtnCount*2+1-page;x++){//此页右边
  str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
  }
  if(pager.maxCount-page-1<pager.numBtnCount){
  for(var y=pager.numBtnCount*2-(pager.maxCount-page-1);y>0;y--){//此页左边
  str+='<button data-page="'+(page-y)+'">'+(page-y+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var z=page+1;z<pager.maxCount;z++){//此页右边
  str+='<button data-page="'+z+'">'+(z+1)+'</button>';
  }
  }
  }
 }else{
  str='';
  for(var n=0;n<page;n++){//此页左边
  str+='<button data-page="'+n+'">'+(n+1)+'</button>';
  }
  str+='<button data-page="'+page+'" class="'+pager.currentBtn+'" disabled="disabled">'+(page+1)+'</button>';//此页
  for(var x=1;x<pager.maxCount-page;x++){//此页右边
  str+='<button data-page="'+(page+x)+'">'+(page+x+1)+'</button>';
  }
 }
 $('.'+pager.numBtnBox).html(str);

 //每个btn绑定请求数据页面跳转方法
 $('.'+pager.numBtnBox+' button').each(function(i,v){
  $(this).click(function(){
  goPage(v.getAttribute('data-page'));
  });
 });
 //按钮禁用
 $('.'+pager.btnBox+' button').not('.'+pager.currentBtn).attr('disabled',false);
 if(!page){//首页时
  $('.'+pager.btnBox+' .first-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .prev-btn').attr('disabled','disabled');
 }
 if(page==pager.maxCount-1){//尾页时
  $('.'+pager.btnBox+' .last-btn').attr('disabled',true);
  $('.'+pager.btnBox+' .next-btn').attr('disabled',true);
 }
 }
 //首屏加载
 createOtherBtn();//首屏加载一次非数字按钮即可
 goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
 }
 //调用
 paginationNick({
 paginationBox:'pagination-nick',//分页容器--必填
 mainBox:'main-box-nick',//内容盒子--必填
 numBtnBox:'num-box-nick',//数字按钮盒子-- 必填
 btnBox:'btn-box-nick',//按钮盒子 --必填
 ipt:'page-ipt-nick',//input class-- 必填
 goBtn:'go-btn-nick',//go btn class --必填
 currentBtn:'active-nick'//当前按钮class name --必填
 });
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

基于LayUI实现前端分页功能的方法

一.LayUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css" rel="exte
layui分页效果实现代码

本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css" > </head> <body
深入理解jQuery layui分页控件的使用

$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d
前端分页功能的实现以及原理（jQuery）

分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用参数设置请求数据页面跳转方法创建非数字按钮和数据内容区创建数字按钮首屏加载调用结构层只需要一个容器 <div class="pagination-nick"></div> 一.定义分页方法 function paginationNick(op
javascript实现前端分页功能

前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现关于代码详解都以注释的方式写在JavaScript里的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet&qu
vue+elementUI组件table实现前端分页功能

前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //不多解释再就是设置分页器total等于table数据的长度 :total="tableData.length" 点击分页器的操作 methods: { handleSizeChange(val) { con
纯jQuery实现前端分页功能

由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题.最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法. 效果展示: 因为核心代码主要在前端jquery,为了简便,后台就用servlet遍历本地磁盘目录文件的形式模拟响应的数据. 本项目的目录结构: 本项目的本地遍历文件夹结构: 处理显示请求的servlet: package com.cn.action; import com.alibaba.fastjson.JSON; impo
jQuery实现的表格前端排序功能示例

本文实例讲述了jQuery实现的表格前端排序功能.分享给大家供大家参考,具体如下: 表格前端按列排序依赖jQuery(本例使用jQuery-1.8.2) 1.初始化方法 (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr =
基于Bootstrap和jQuery构建前端分页工具实例代码

前言为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的前端分页优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
JQuery+Ajax实现数据查询、排序和分页功能

之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor
jQuery实现的分页功能示例

本文实例讲述了jQuery实现的分页功能.分享给大家供大家参考,具体如下: 1.分页栏HTML码 <div class="g-cf g-pagerwp"> <div style="visibility:hidden" class="g-pager"> </div> </div> 2.CSS样式文件 .g-cf:after {clear: both;content: "";disp
jQuery基于xml格式数据实现模糊查询及分页功能的方法

本文实例讲述了jQuery基于xml格式数据实现模糊查询及分页功能的方法.分享给大家供大家参考,具体如下: 1.此代码只支持xml 格式数据,根据不同需求修改ajax的success方法就ok了 2.此代码只是针对ajax只需一次请求的情况下 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//解决ie trim问题 (function($) { /** * ============

前端分页功能的实现以及原理（jQuery）

相关推荐

随机推荐