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 ...
随机推荐
- 洛谷——P2862 [USACO06JAN]把牛Corral the Cows
P2862 [USACO06JAN]把牛Corral the Cows 题目描述 Farmer John wishes to build a corral for his cows. Being fi ...
- 你也许还不知道const_cast,static_cast,dynamic_cast,reinterpret_cast的区别吧？
[QQ群: 189191838,对算法和C++感兴趣可以进来] 开篇立意: C++中各种转换令人眼花缭乱,看似差不多,实际差很多,而且在当今时间,做一个"差不多先生"其 ...
- PL/SQL分支、循环语句
CREATE OR REPLACE PROCEDURE PR_TEST2 IS V_CASE NUMBER(5) := 100; BEGIN IF 2 < 1 THEN DBMS_OUTPUT. ...
- sql server 性能调优 资源等待之网络I/O
原文:sql server 性能调优 资源等待之网络I/O 一.概述 与网络I/O相关的等待的主要是ASYNC_NETWORK_IO,是指当sql server返回数据结果集给客户端的时候,会先将结果 ...
- How to: Launch the Debugger Automatically
Sometimes, you may need to debug the startup code for an application that is launched by another pro ...
- Delphi 实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题
给你一段代码,网上转的:unit uMyClassHelpers;//实现窗体自适应调整尺寸以适应不同屏幕分辩率的显示问题.// 陈小斌,2012年3月5日 interface Uses ...
- Windows查看所有的端口及端口对应的程序
步骤一.Windows查看所有的端口 点击电脑左下角的开始,然后选择运行选项,接着我们在弹出的窗口中,输入[cmd]命令,进行命令提示符.然后我们在窗口中输入[netstat -ano]按下回车,即会 ...
- centos7 安装LNMP（php7）之mysql安装，更改密码，远程授权
1.执行命令 yum install mysql mysql-server mysql-devel -y 知道出现complete!则安装mysql完成 当执行 service mysqld rest ...
- DotnetBrowser高级教程-（5）使用内置的MVC UI框架-EasyMvc
如果DotnetBrowser只是实现了内置chrome浏览器和web/web socket server,似乎还不是很完美.因此,最新的DotnetBrowser已经内置对easy mvc控件的支持 ...
- 对类中的成员函数的定义和声明最后添加一个const是什么意思？
1.const修饰的成员函数只能调用const修饰的成员函数,且不能修改数据成员变量的值. 2.const修饰的类对象只能调用const修饰的成员函数. 3.const修饰的类对象可以调用非const ...