电脑换了固态硬盘，准备重装系统，因此打算把项目里一直延用的代码总结出来，防止丢失，以后也方便查阅。Ajax分页已经是非常普遍的技术了，所以也没什么需要特别说明的，直接贴代码：

html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <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"/>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=11;IE=10;IE=9; IE=8; IE=7; IE=edge">
  7.     <meta name="renderer" content="webkit">
  8.     <title>Title</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.  
  15.         #dataList {
  16.             min-height: 400px;
  17.         }
  18.  
  19.         #page {
  20.             text-align: center;
  21.             font-size: 0;
  22.         }
  23.  
  24.         .pageBtn {
  25.             font-size: 14px;
  26.             width: 30px;
  27.             height: 30px;
  28.             line-height: 30px;
  29.             text-decoration: none;
  30.             display: inline-block;
  31.             color: #000;
  32.             margin: 5px;
  33.             vertical-align: middle;
  34.         }
  35.  
  36.         .pageBtn.current, .pageBtn:hover {
  37.             color: #d60000;
  38.             background-color: #ffc8f3;
  39.         }
  40.  
  41.         #page a.prev,
  42.         #page a.next {
  43.             width: 0;
  44.             height: 0;
  45.             overflow: hidden;
  46.             border-width: 8px;
  47.             display: inline-block;
  48.             vertical-align: middle;
  49.             margin: 0 8px;
  50.         }
  51.  
  52.         #page a.prev {
  53.             border-style: dashed solid dashed dashed;
  54.             border-color: transparent #c34da9 transparent transparent;
  55.         }
  56.  
  57.         #page a.next {
  58.             border-style: dashed dashed dashed solid;
  59.             border-color: transparent transparent transparent #c34da9;
  60.         }
  61.  
  62.         ul {
  63.             padding-left: 50px;
  64.             list-style: decimal;
  65.         }
  66.     </style>
  67.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  68.     <script src="pagination.js"></script>
  69. </head>
  70. <body>
  71. <ul id="dataList"></ul>
  72. <div id="page"></div>
  73.  
  74. <script>
  75.     function initPerData(page) {
  76.         $('#dataList').empty();
  77.         var options = {
  78.             _page: page,
  79.             _limit: 1
  80.         };
  81.         getFakeData(options);
  82.     }
  83.  
  84.     function getFakeData(options) {
  85.         $.get('http://localhost:3000/posts', options, function (data) {
  86.             $('#page').html(makePage(data[0].total, options._page, options._limit));
  87.  
  88.             var html = '';
  89.             for (var i = 0, len = data.length; i < len; i++) {
  90.                 html += `<li>${data[i].title}<br/>${data[i].body}</li>`;
  91.             }
  92.             $('#dataList').append(html);
  93.         });
  94.     }
  95.  
  96.     getFakeData({_page: 1, _limit: 1});
  97. </script>
  98. </body>
  99. </html>

pagination.js

  1. /**
  2.  * todo:创建分页
  3.  * @param total {Number} 数据总条数
  4.  * @param currentPage {Number} 当前页码
  5.  * @param pageSize {Number} 每页显示几条数据
  6.  */
  7. function makePage(total, currentPage, pageSize) {
  8.     pageSize = pageSize || 10;
  9.  
  10.     var html = '';
  11.     var pageCount = Math.ceil(total / pageSize);    //总页数
  12.  
  13.     if (pageCount > 1) {
  14.         if (pageCount <= 10) {
  15.             for (var i = 1; i <= pageCount; i++) {
  16.                 if (currentPage === i) {
  17.                     html += '<a href="javascript:void(0)" class="pageBtn current">' + i + '</a>';
  18.                 } else {
  19.                     html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
  20.                 }
  21.             }
  22.         } else {//如果大于10页执行此段分支
  23.             if (currentPage !== 1) {//如果不是第一页则显示上一页按钮
  24.                 html += '<a onclick="initPerData(' + (currentPage - 1) + ')" href="#dataList" class="prev" data-currentP="' + (currentPage - 1) + '"></a>'
  25.             }
  26.  
  27.             if (currentPage <= 4) {
  28.                 for (var i = 1; i <= 10; i++) {
  29.                     if (currentPage === i) {
  30.                         html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
  31.                     } else {
  32.                         html += '<a href="#dataList"  onclick="initPerData(' + i + ')" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
  33.                     }
  34.                 }
  35.                 html += '<a href="#dataList" class="pageBtn" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
  36.             } else {
  37.                 html += '<a href="#dataList" class="pageBtn" onclick="initPerData(1)"  data-currentP="1">1...</a>';
  38.                 if (pageCount - currentPage <= 8) {
  39.                     for (var i = currentPage - (9 - (pageCount - currentPage)); i <= pageCount; i++) {
  40.                         if (currentPage === i) {
  41.                             html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
  42.                         } else {
  43.                             html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
  44.                         }
  45.                     }
  46.                 } else {
  47.                     for (var i = currentPage - 2; i <= currentPage + 7; i++) {
  48.                         if (currentPage === i) {
  49.                             html += '<a href="#dataList" class="pageBtn current">' + i + '</a>';
  50.                         } else {
  51.                             html += '<a onclick="initPerData(' + i + ')" href="#dataList" class="pageBtn" data-currentP="' + i + '">' + i + '</a>';
  52.                         }
  53.                     }
  54.                     html += '<a class="pageBtn" href="#dataList" onclick="initPerData(' + pageCount + ')" data-currentP="' + pageCount + '">...' + pageCount + '</a>';
  55.                 }
  56.             }
  57.  
  58.             if (currentPage !== pageCount) {//不是最后一页就显示下一页
  59.                 html += '<a onclick="initPerData(' + (currentPage + 1) + ')" href="#dataList" class="next" data-currentP="' + (currentPage + 1) + '"></a>';
  60.             }
  61.         }
  62.     }
  63.     return html;
  64. }

每个需要分页的页面都应该实现一个initPerData方法，用于实现分页以外不同的逻辑。

完整代码

Ajax分页功能的实现的更多相关文章

  1. 纯手写实现ajax分页功能

    前言 最近用到了这个功能,百度大半天,网上的不是有各种问题就是需要引入其他的插件,无奈,只能自己写,大致功能已经完成.前端页面用bootstrap做样式,分页功能用ajax实现,没用其他插件哦,只引入 ...

  2. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  3. ajax分页效果、分类联动、搜索功能

    一.使用smarty+ajax+php实现无刷新分页效果 效果图 <!DOCTYPE html> <html lang="en"> <head> ...

  4. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  5. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  6. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  7. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

  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 **** ...

  9. 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 ...

随机推荐

  1. Python_Tips[1] -> 利用 Python 的字典实现 Switch 功能

    利用 Python 的字典实现 Switch 功能 Python是没有switch语句的,当遇到需要实现switch语句的功能时,一般可以用if/else进行代替,但是还有一种更加简洁的实现方法,利用 ...

  2. Super Ugly Number -- LeetCode

    Write a program to find the nth super ugly number. Super ugly numbers are positive numbers whose all ...

  3. manacher（马拉车）算法详解+例题一道【bzoj3790】【神奇项链】

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=39091399 (CSDN好像有bug,不知道为什 ...

  4. [POI2012]Festival

    题目大意: 有$n$个正整数$x_1,x_2,\ldots,x_n$,再给出一些限制条件,限制条件分为两类: 1.给出$A,B$,要求满足$X_A+1=X_B$: 2.给出$C,D$,要求满足$X_C ...

  5. MySQL性能指标及计算方法 等待show processlist

    http://www.cnblogs.com/cyt1153/p/6697847.html http://www.cnblogs.com/cyt1153/tag/mysql/

  6. android开发之自定义圆形ImagView

    在日常使用中我们经常会使用到圆形的图片,但是android系统中并没有默认的圆形控件,所以我们需要自己来写一个自定义的ImagView来显示一张圆形的图片,下面先看效果 详细的方法是我们自定义一个类, ...

  7. 【Linux】CentOS7 添加常用源

    CentOS 的官方源去掉了一些与版权有关的软件,因此想要安装这些软件或者手动下载安装,或者使用其他源. 下面是添加EPEL源和RPMforge源的步骤. 1.首先, 添加源之前要确定系统架构及版本 ...

  8. JS方面重点摘要（二）

    1.函数声明与函数表达式 (1)变量声明会置顶提前,但赋值仍在原地方(2)函数声明同变量声明一样会提前:但是,函数表达式没有提前,就相当于平时的变量赋值(3)函数声明会覆盖变量声明,但不会覆盖变量赋值 ...

  9. JDK开发WebService

    java开发web service最简单的方式是用jdk6自带的支持web service的注解功能. 1.编写代码如下: package net.swiftlet; import javax.jws ...

  10. log4j教程 8、日志格式化

    Apache log4j 提供了各种布局对象,每一个对象都可以根据各种布局格式记录数据.另外,也可以创建一个布局对象格式化测井数据中的特定应用的方法. 所有的布局对象 - Appender对象收到 L ...