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 ...
随机推荐
- HDU1010 Tempter of the Bone(回溯 + 剪枝)
本文链接:http://i.cnblogs.com/EditPosts.aspx?postid=5398734 题意: 输入一个 N * M的迷宫,这个迷宫里'S'代表小狗的位置,'X'代表陷阱,‘D ...
- Python的扩展接口[0] -> VISA仪器控制
VISA仪器控制 / VISA Instrument Control 1 VISA简介 / VISA Introduction VISA(Virtual Instrument Software Arc ...
- 【bzoj1085】【 [SCOI2005]骑士精神】启发式剪枝+迭代加深搜索
(上不了p站我要死了,侵权度娘背锅) 如果这就是启发式搜索的话,那启发式搜索也不是什么高级玩意嘛..(啪啪打脸) Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且 ...
- 2.3多线程（java学习笔记）synchronized关键字
一.为什么要用synchronized关键字 首先多线程中多个线程运行面临共享数据同步的问题. 多线程正常使用共享数据时需要经过以下步骤: 1.线程A从共享数据区中复制出数据副本,然后处理. 2.线程 ...
- 八. 输入输出(IO)操作1.输入输出基本概念
输入输出(I/O)是指程序与外部设备或其他计算机进行交互的操作.几乎所有的程序都具有输入与输出操作,如从键盘上读取数据,从本地或网络上的文件读取数据或写入数据等.通过输入和输出操作可以从外界接收信息, ...
- android中的开机自启动
android中的开机自启动 android中的开机自启动可分为两步: 1.写一个BroadcastReceiver: public class BootReceiver extends Broadc ...
- MySQL中in子查询会导致无法使用索引问题（转）
MySQL的测试环境 测试表如下 create table test_table2 ( id int auto_increment primary key, pay_id int, pay_time ...
- UITableView的HeaderView和FooterView
header通过下面两个代理方法设置 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSIntege ...
- Oracle truncate、 delete、 drop区别
相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...
- functor
I thought it would be easy and convenient to define a small functor and perform a customized sort on ...