Ajax分页功能的实现
电脑换了固态硬盘，准备重装系统，因此打算把项目里一直延用的代码总结出来，防止丢失，以后也方便查阅。Ajax分页已经是非常普遍的技术了，所以也没什么需要特别说明的，直接贴代码：
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8; IE=7; IE=edge">
<meta name="renderer" content="webkit">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} #dataList {
min-height: 400px;
} #page {
text-align: center;
font-size: 0;
} .pageBtn {
font-size: 14px;
width: 30px;
height: 30px;
line-height: 30px;
text-decoration: none;
display: inline-block;
color: #000;
margin: 5px;
vertical-align: middle;
} .pageBtn.current, .pageBtn:hover {
color: #d60000;
background-color: #ffc8f3;
} #page a.prev,
#page a.next {
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
display: inline-block;
vertical-align: middle;
margin: 0 8px;
} #page a.prev {
border-style: dashed solid dashed dashed;
border-color: transparent #c34da9 transparent transparent;
} #page a.next {
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #c34da9;
} ul {
padding-left: 50px;
list-style: decimal;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="pagination.js"></script>
</head>
<body>
<ul id="dataList"></ul>
<div id="page"></div> <script>
function initPerData(page) {
$('#dataList').empty();
var options = {
_page: page,
_limit: 1
};
getFakeData(options);
} function getFakeData(options) {
$.get('http://localhost:3000/posts', options, function (data) {
$('#page').html(makePage(data[0].total, options._page, options._limit)); var html = '';
for (var i = 0, len = data.length; i < len; i++) {
html += `<li>${data[i].title}<br/>${data[i].body}</li>`;
}
$('#dataList').append(html);
});
} getFakeData({_page: 1, _limit: 1});
</script>
</body>
</html>
pagination.js
/**
* todo:创建分页
* @param total {Number} 数据总条数
* @param currentPage {Number} 当前页码
* @param pageSize {Number} 每页显示几条数据
*/
function makePage(total, currentPage, pageSize) {
pageSize = pageSize || 10; var html = '';
var pageCount = Math.ceil(total / pageSize); //总页数 if (pageCount > 1) {
if (pageCount <= 10) {
for (var i = 1; i <= pageCount; i++) {
if (currentPage === i) {
html += '<a href="javascript:void(0)" class="pageBtn current">' + i + '</a>';
} else {
html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
}
}
} else {//如果大于10页执行此段分支
if (currentPage !== 1) {//如果不是第一页则显示上一页按钮
html += '<a onclick="initPerData(' + (currentPage - 1) + ')" href="#dataList" class="prev" data-currentP="' + (currentPage - 1) + '"></a>'
} if (currentPage <= 4) {
for (var i = 1; i <= 10; i++) {
if (currentPage === i) {
html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
} else {
html += '<a href="#dataList" onclick="initPerData(' + i + ')" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
}
}
html += '<a href="#dataList" class="pageBtn" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
} else {
html += '<a href="#dataList" class="pageBtn" onclick="initPerData(1)" data-currentP="1">1...</a>';
if (pageCount - currentPage <= 8) {
for (var i = currentPage - (9 - (pageCount - currentPage)); i <= pageCount; i++) {
if (currentPage === i) {
html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
} else {
html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
}
}
} else {
for (var i = currentPage - 2; i <= currentPage + 7; i++) {
if (currentPage === i) {
html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
} else {
html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
}
}
html += '<a class="pageBtn" href="#dataList" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
}
} if (currentPage !== pageCount) {//不是最后一页就显示下一页
html += '<a onclick="initPerData(' + (currentPage + 1) + ')" href="#dataList" class="next" data-currentP="' + (currentPage + 1) + '"></a>';
}
}
}
return html;
}
每个需要分页的页面都应该实现一个initPerData方法，用于实现分页以外不同的逻辑。
Ajax分页功能的实现的更多相关文章
- 纯手写实现ajax分页功能
前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- ajax分页效果、分类联动、搜索功能
一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...
- 分页功能实现之通过ajax实现表单内容刷新
拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
随机推荐
- 洛谷 P1060 开心的金明【DP/01背包】
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:"你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就 ...
- ZOJ 3949 (17th 浙大校赛 B题，树型DP）
题目链接 The 17th Zhejiang University Programming Contest Problem B 题意 给定一棵树,现在要加一条连接$1$(根结点)和$x$的边,求加 ...
- Activator常用方法
1.获取图片 public static Image getImage(String key) { Image img = getDefault().getImageRegistry() ...
- Python的网络编程[4] -> DHCP 协议[1] -> DHCP 的 Python 实现
DHCP实现 / DHCP Implement 目录 DHCP 服务器建立过程 DHCP 报文加码实现过程 下面介绍建立一个简单的DHCP服务器,主要用于对基本的DHCP请求进行响应,目前只提供一个I ...
- Java this关键字详解
this 关键字用来表示当前对象本身,或当前类的一个实例,通过 this 可以调用本对象的所有方法和属性.例如: public class Demo{ public int x = 10; publi ...
- ARP/RARP
IP地址和MAC地址之间的转换 点对点链路不使用ARP ARP高速缓存 ARP高效运行的关键是每个主机上都有一个ARP高速缓存. 存放了最近IP地址与MAC地址间的映射关系. 每一项生存时 ...
- java的几个概念AOP、IOC、DI、DIP、工厂模式、IOC容器
1.AOP:面向切面编程 把一些公共类,比如日志类.安全类.数据库连接类.系统统一的认证.权限管理类.资源池(如数据库连接池的管理).性能监控等做成一个公共类,当其他类需要时,进行注入(调用).这样这 ...
- 一个例子理解Predicate、Consumer和Stream
一个需求: 把年龄大于20的学生的信息打印出来. 面向对象编程 public class Student { private String name; private int age; private ...
- mysql关于访问权限以及root密码修改
root密码修改:mysql> use mysql;mysql> UPDATE user SET Password = PASSWORD('newpass') WHERE user = ' ...
- zabbix主机自动发现和监控
在主机较多的时候,配置主机自动发现并加入监控可以代替手动的添加主机,减轻工作量,自动发现由服务端主动发起,Zabbix Server开启发现进程,定时扫描局域网中IP服务器.设备.可以根据需要,在对主 ...