前端分页功能的实现以及原理(前端分页功能的实现以及原理(jQuery))
分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了。现闲得无聊,就写出来
玩玩,只实现功能,并未封装。
基于基于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);