html ajax实现分页代码,jQuery实现的分页功能，包括ajax请求，后台数据，有完整demo...

一：需求分析

1)需要首页，末页功能

2)有点击查看上一页，下一页功能

3)页码到当前可视页码最后一页刷新页面

二：功能实现思路

也是分为三部分处理

1)点击首页，末页直接显示第一页或者最后一页内容，当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图

首页状态 和 末页状态代码执行结果截图

2)点击可视页码截图

3)点击上一页或者下一页，，需要刷新页码状态时截图，昨天表示当前页码为7，右图是点击上一页，刷新页码时的状态

三：代码参数说明

/* 初始化页面 */

var initTotalPageNum = 11;

$("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});

为了区分清楚，所以把每一个文件都分开写了。

data.js 　　　　　　　　　　　　　　//是用json模拟的后台数据.

sendAjax.js 　　　　　　　　　　　　//是模拟的ajax请求后台数据的文件

page.js 　　　　　　　　　　　　　　//是封装的生成页码的功能

initTotalPageNum　　　　　　　　//模拟的后台传入的数据总页码

pageSize　　　　　　　　　　　　//自定义参数，可以定义可视区域代码,当前demo。pageSize = 5,initTotalPageNum=3 小于pageSize 的时候，显示状态如下图所示

四：代码优缺点

1)使用ajax可以实现局部刷新，但是不利于seo

2) 生成页码没有改变dom结构，只变化页码

最近项目中的需求，自己写的一个。有时间的话会用js实现一遍。

有需要的话，完整demo 下载 pageAjax.zip

jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

前台返回json数据的常用方式+常用的AJAX请求后台数据方式

我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...

JS 操作 HTML 和 AJAX 请求后台数据

为某个元素插入值,添加属性,添加子元素

Ajax请求后台数据

一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...

ajax 请求后台数据返回异常 及 提示404方法名不存在

1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...

jQuery Ajax请求后台数据并在前台接收

1.ajax基本语法

【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单:

用Ajax请求后台数据

我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <%@ page language="java" contentType=&quot ...

js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台

setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...

随机推荐

mysql&lowbar;connect&lpar;&rpar; php7不支持，php5&period;5可以，是废弃函数

天用了PHP7,发现和PHP5变化还挺大的,最大的就是MySQL的连接库变了. PHP5中使用mysql_connect()函数进行连接,但实际上,PHP5.5开始,MySQL就不推荐使用了,属于废弃 ...

可扩展验证框架 - A2DFramework验证框架使用介绍

SUMMARY 用途 DEMO演示 NuGet相关的资料 VS工具端的设置 用途 数据验证的作用很重要,目前.NET提供的内建验证机制是采用DataAnnotation方式来实现属性的验证,并且也提供 ...

Puppet&&num;39&semi;s Architecture 3&period;7

Puppet configures systems in two main stages: Compile a catalog Apply the catalog The Agent/Master A ...

一劳永逸让windows 64位操作系统 禁止强制驱动签名

如何让WINDOWS7 64位直接加载“禁用强制驱动程序签名”方式启动  Windows Client 论坛 > Windows 7 问题 0 登录进行投票 因为开发需要,要装一台设备的驱动,但 ...

Android开发者必须深入学习的10个应用开源项目

Android 开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项 目,贡献出他们的智慧和创造力.学习开源代码是掌握技术的 ...

ASP&lowbar;Login

===第一种============================================================================================== ...

Java基础——多态

多态性是指允许不同类型的对象对同一消息做出相应.具有灵活性.抽象.行为共享.代码共享的优势,共享就意味着最大化利用和简洁,还有就是加载速度. 一.多态的作用 消除类型之间的耦合关系.即同一事件发生在不 ...

AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

SmartSql漫谈

最近在看smartSql源码,兄弟写的.写的很不错取取经. 记录下一些学习的东西,刚开始我先不系统的写了,随意一点哈,我看的差不多再给大家一个模块一个模块系统的写. public T ExecuteS ...

&lbrack;Swift&rsqb;LeetCode730&period; 统计不同回文子字符串 &vert; Count Different Palindromic Subsequences

Given a string S, find the number of different non-empty palindromic subsequences in S, and return t ...