jQuery实现的分页小案例

网上有很多分页小插件，实现原理大概心里是知道的，但实际操作起来不知如何，自己就写了一个小案例实现了一下分页功能。

因为是简单的练手，并没有用ajax请求数据，直接用了数组存储数据，数组存储了25条信息。这只是一个简单的小案例，并没有将其封装成插件。

html文本很简单，ul标签里面是要展示的列表，下面的div盒子装着页码。

<ul class="list">
</ul>
<div class="page">
  <div class="start">首页</div>
  <div class="end">尾页</div>
</div>

此分页的要求是：当少于或者等于五时，显示全部页数，隐藏首页和尾页按钮。当页数大于五页时，只展示五页，并且当前页在中间。如果当前页居中不足五页则隐藏首页（或尾页）补足五页（此情况发生在当前页为第一页、第二页、倒数第二页，最后一页）。

下面来介绍一下几个简单但是在案例中常用到的函数。

changeClass是当前页号样式函数，num是当前页号的索引，.current类是当前页不同于其他的样式。

let changeClass=(num)=>{
    $(".pageNum").parent().children().removeClass("current");
    $(".pageNum").eq(num).addClass("current");
}

txt是用来改变页号的函数，n为页号索引，m为页号值。

let txt=(n,m)=>{
    $(".pageNum").eq(n).text(m);
}

createPage生成页码的函数

let createPage=(pageCount)=>{
    for(let i=0;i<pageCount;i++)
    {
	let str=`<div class="pageNum">${i+1}</div>`;
	$(".end").before(str);
    }
}

changePageOne当点击页码为1、2或者首页时的页码变化函数

let changePageOne=()=>{
    $(".start").css("display","none");
    txt(0,1);
    txt(1,2);
    txt(2,3);
    txt(3,4);
    txt(4,5);
}

changePageFinal当点击页码为最后两页或者尾页时页码变化的函数

let changePageFinal=()=>{
    $(".end").css("display","none");
    txt(0,pageCount-4);
    txt(1,pageCount-3);
    txt(2,pageCount-2);
    txt(3,pageCount-1);
    txt(4,pageCount);
}

addContent是添加显示内容的函数

let addContent=(i)=>{
    let li=`<li>${arr[i]}</li>`;
    list.append(li);
}

分页的重点是点击页码（以及首页和尾页）做出的一系列反应操作，以上几个小函数都是在点击操作中常用到的。我这里将每页显示的内容内容那个条数、显示内容的总数以及总页数设置成了全局变量，并简单的初始化了显示的第一页。然后再分别调用了页码函数、首页和尾页函数。

<script>
    let arr=[];
    let list=$(".list");
    for(let i=0;i<5;i++)
        arr.push("床前明月光");
    for(let i=5;i<10;i++)
        arr.push("疑是地上霜");
    for(let i=10;i<15;i++)
	arr.push("我要变成有钱人");
    for(let i=15;i<20;i++)
	arr.push("举头望明月");
    for(let i=20;i<25;i++)
	arr.push("低头思故乡");
    //number pageCount length定义成全局变量
    //number是每页存储的数据，pageCount是总页数,length是总数据的长度
    let number=4;
    let length=arr.length;
    let pageCount=Math.ceil(length/number);
    //首先初始化第一页
    for(let i=0;i<number;i++)
        addContent(i);
    //页号
    page(pageCount);
    //首页
    start();
    //尾页
    end();
</script>

page()函数内部要根据所传入的pageCount值进行判断是页码小于等于五的情况还是大于五的情况，大于五的情况下又分为特殊情况和普通情况。

//page函数是关于页号数字按钮的函数，其中pageCount为显示所有内容需要的页数
let page=(pageCount)=>{
    let currentPageCount=0;
    if(pageCount<=5)
    {
	//根据计算出的页数来动态生成页码
	createPage(pageCount);
	$(".pageNum").eq(0).addClass("current");
	$(".start").css("display","none");
	$(".end").css("display","none");
	$(".pageNum").click(function(){
	    currentPageCount=$(this).text();
	    //点击元素为当前页，页码样式要改变
    	    $(this).parent().children().removeClass("current");
	    $(this).addClass("current");
	    //当前页内容要改变，首先清除原先页面内容，然后再添加当前页的内容
	    list.html("");
	    for(let i=number*(currentPageCount-1);i<number*currentPageCount;i++)
	    {
	        //如果i已经等于总数据，说明数据已经显示完了，不用继续显示了
		if(i==length)
		    break;
		addContent(i);
	    }
	});
    }
    else
    {
	//一直是五个页面，初始时当前页为第一页，而且首页并没有显示出来
	createPage(5);
	$(".pageNum").eq(0).addClass("current");
	$(".start").css("display","none");
	//当点击页码
	$(".pageNum").click(function(){
	    //currentPageCount是当前页的页号
	    currentPageCount=$(this).text();
	    //首先判断当前页是否为第二页或者倒数第二页，若是，隐藏首页（尾页）页码，否则，显示
	    //此两种情况接近开头和结尾两种情况，要单独分析，否则会造成无限下一页（上一页）
	    let count=Number(currentPageCount);
	    if(count==1)
	    {
	         changePageOne();
		 changeClass(0);
	    }
	    else if(count==2)
	    {
		changePageOne();
		changeClass(1);
	    }
	    else if(count==pageCount-1)
            {
	        changePageFinal();
		changeClass(3);
	    }
	    else if(count==pageCount)
	    {
		changePageFinal();
		changeClass(4);
	    }
			
	    //页数做出相应该改变，当前页保持在中间
	    else
	    {
	        $(".start").css("display","block");
		$(".end").css("display","block");
		txt(0,count-2);
		txt(1,count-1);
		txt(2,count);
		txt(3,count+1);
		txt(4,count+2);
		changeClass(2);
	    }
			
	    //当前页内容要改变，首先清除原先页面内容，然后再添加当前页的内容
	    list.html("");
	    for(let i=number*(count-1);i<number*count;i++)
	    {
	        if(i==length)
		    break;
		addContent(i);
	    }
	});
    }
}

当点击首页的时候显示前五页并且当前页为第一页，同时尾页按钮隐藏。

let start=()=>{
	$(".start").click(function(){
		$(this).parent().children().removeClass("current");
		$(this).addClass("current");
		list.html("");
		for(let i=0;i<number;i++)
		{
			addContent(i);
		}
		changePageOne();
		changeClass(0);
		$(".end").css("display","block");
	});
}

点击尾页的时候显示最后五页，并且当前页为最后一页，同时首页按钮隐藏。

let end=()=>{
	$(".end").click(function(){
		$(this).parent().children().removeClass("current");
		$(this).addClass("current");
		list.html("");
		//注意尾页显示内容的计算，是前面已经显示的内容的下一条到最后一条
		//而非length-number到length，这样会导致点击尾页显示的内容与最后一页不符
		for(let i=(number*(pageCount-1));i<length;i++)
		{
			addContent(i);
		}
		changePageFinal();
		changeClass(4);
		$(".start").css("display","block");
	});
}

至此，这个简易的分页案例就完成了。

在这个案例中要注意，几个小问题：

扫描二维码关注公众号，回复： 2665918 查看本文章

（1）显示的数据是有限的，最后一页不一定是满的，要有控制条件使得当显示完最后一条信息的时候不再继续添加显示内容。

我在循环中用了break语句来实现当已经将数据全部显示完时不再添加内容。

（2）要注意点击尾页是直接显示的最后一页，这里的显示数据要注意，不是length-number到length,这样会导致点击尾页显示的最后一页与页码显示的最后一页不一致，尾页显示永远是number条，超出总数的部分会是undefined。记住，尾页显示的内容是从倒数第二页最后一条的下一条开始，直到展示内容的最后一条。所以，尾页按钮展示的内容应该是(PageCount-1)*number到length(由于数组索引从零开始，不包括length)。

（3）注意在点击首页的时候要将尾页显示出来，同理点击尾页的时候要将首页显示出来。如果没有写这样的语句，虽然混合点击页码按钮和首页、尾页按钮不会出现什么问题，但是如果点击首页紧接着点击尾页，或者点击尾页紧接着点击首页的会导致首页和尾页按钮同时消失。

案例大致效果

jQuery实现的分页小案例

猜你喜欢