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 ...
随机推荐
- Python的程序结构[3] -> 变量/Variable[0] -> 变量类型
变量类型 / Variable Type 在 Python 中,变量主要有以下几种,即全局变量,局部变量和内建变量, 全局变量 / Global Variable 通常定义于模块内部,大写变量名形式存 ...
- Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条
Xamarin XAML语言教程隐藏文件使用Progress属性设置进度条 Xamarin XAML语言教程隐藏文件中使用Progress属性设置进度条进度,开发者除了可以在XAML中使用Progre ...
- HDU 2586 How far away? LCA 转化成RMQ
链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 [题意] 给出一个N 个和N-1条边的连通图,询问任意两点间的距离.N<=40000 . [分 ...
- 虚拟机拷贝之后，发现系统内的开机自启动的nginx，不能自启动了
因业务需要,同事以某个虚拟机为模板,复制出其他的CentOS虚拟机时,发现原系统内的开机自启动的nginx,不能再自启动了. 好吧,那就重新注册一下 nginx 的开机自启动: # 先删除原来的注册: ...
- 随机取若干条记录的SQL语句
原文:随机取若干条记录的SQL语句 MySql中随机提取数据库N条记录 select * from TableName order by rand() limit N SQLServer中随机提取 ...
- SqlServer发布订阅错误收集
原文:SqlServer发布订阅错误收集 目录 1. SqlServer发布订阅错误收集 1.1. Message:脚本对于表"dbo.table"失败. 1.1.1. 错误消息 ...
- Delphi CRC算法crcexecute
function crcexecute(pcstring : string) : string ; forward; var gnkey : integer; gnsalt : integer; ...
- hdu1013(C++)
9的余数定理:一个数各位数字的总和除以9的余数与它本身除以9的余数同等 大数问题:防止大数,用字符串来存入数据,再转化为数字 #include<iostream>#include<s ...
- hdu1008(c++)
分清上升停留下降一步步来就是了 #include<iostream>#include<vector>using namespace std;int main(){ int N, ...
- Linux内核锁与中断处理
Linux内核锁 在Linux内核里面,一般采用了如下几种锁的机制,来保证多线程的同步与互斥: (1)原子操作 atomic_t v: void atomic_set(atomic_t *v, int ...