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 ...
随机推荐
- （）java jdbc连接
测试使用 jdk-8u191-windows-x64.mysql-8.0.12-winx64.mysql-connector-java-8.0.13.jar 查询 import java.sql.*; ...
- #420 Div2 C
#420 Div2 C 题意 不断把数加入到一个栈里,取数的时候要求按照 1~n 的顺序取数,每次取数保证数一定在栈里,如果要取的数不在栈头,可以选择对栈排序一次.问最少排序几次. 分析 只要栈头的数 ...
- Spfa【p3385】【模板】负环(spfa)
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述 毒瘤数据要求判负环 分析: 还是融合了不少题解的思想的. 负环定义: 权值和为负的环 //在网络上并没有找到一个官方定义,暂且这么理解. ...
- Javascript模块化编程（二）：AMD规范(转)
这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...
- Implicit declaration of function 'ether_ntoa' is invalid in C99
报错代码: strcpy(temp, (char *)ether_ntoa(LLADDR(sdl))); 解决方法: 导入这三个头文件即可, #include <sys/types.h> ...
- Ubuntu 16.04使用“从互联网自动获取”时间无法写入硬件BIOS的奇怪问题
目前发现的就是这个问题,只能手动同步到BIOS. 如果是手动设置过时间,那么可以正常同步到BIOS. 而如果切换到从互联网自动获取时间时,是不能同步到BIOS的,但是界面上的时间确实最新的. 并且这个 ...
- espresso 元素遮挡问题。
在使用espresso进行测试的时候,点击一个横向列表的时候会在点击的项目下出现对应的横线. 实现方式是在FrameLayout下放两个TextView, 一个TextView包含下划线,默认是Fra ...
- 15 个 Docker 技巧和提示
CLI(Command Line Interface,命令行) 好的 docker ps 输出 将 docker ps 输出通过管道重定向到 less -S,避免折行: docker ps -a | ...
- django静态html中做动态变化
在搭建网站中经常有筛选分类的需求 在django中为了简便,我们经常将某些相同部分的内容取出来单独存放形成一个base模板,其他的template继承这个base就可以使用其中的内容 但是这些相同的部 ...
- jquery调用click事件的三种方式
第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello Wor ...