jQuery实现的分页小案例

最新推荐文章于 2024-09-01 12:28:44 发布

柳宁依

最新推荐文章于 2024-09-01 12:28:44 发布

阅读量4.7k

点赞数 3

分类专栏： Jquery 分页

本文链接：https://blog.youkuaiyun.com/weixin_36339245/article/details/81062199

版权

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

因为是简单的练手，并没有用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 chan