需求分析

1)需要首页和末页功能

2)点击查看上一页和下一页

3)将页面从页码刷新到当前可见页码的最后一页

实现理念

它也分为三个部分

1)点击首页，最后一页将直接显示首页或最后一页的内容。当前页面是第一页或最后一页。隐藏第一个或最后一个按钮。演示显示截图

第一页状态和最后一页状态代码的执行结果截图

2)点击可视页码截图

3)点击上一页或下一页，需要刷新页码状态时截图。昨天当前页码是7，右边图片显示的是点击上一页刷新页码时的状态。

代码参数描述

script src=' http : js/jquery-1 . 8 . 3 . min . js ' type=' text/JavaScript '/script script src=' http : data/data . js ' type=' text/JavaScript '/script script src=' http : js/sendajax . js ' type=' text/JavaScript '/script script src=' http 360 js/page . js ' type=' text/js '$('#ui-page ')。分页({pageSize:5，totalpage : inittotalpagenum })；/script要区分清楚，所以把每个文件分开写。

Data.js //是json模拟的后台数据。

Sendajax.js //是模拟ajax请求后台数据的文件

Page.js //是一个用于生成页码的封装函数

InitTotalPageNum//模拟后台传入数据的总页数

PageSize//用户自定义参数，可以定义可视区域代码和当前演示。当页面大小=5，initTotalPageNum=3 3小于页面大小时，显示状态如下图所示

代码优缺点

1) ajax可以实现本地刷新，但不利于seo

2)生成的页码不改变dom结构，只改变页码

最近项目里的要求，一个我自己写的。如果你有时间，你会用js再次实现它。

如有必要，完成演示，点击此处下载

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。