脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery分页功能（含ajax请求、后台数据）

jQuery实现分页功能（含ajax请求、后台数据、附完整demo）

 更新时间：2017年04月03日 09:49:19   作者：http://www.cnblogs.com/enemy/p/5253779.html  
这篇文章主要给大家介绍了关于jQuery实现分页功能的相关资料，主要包含ajax请求和后台数据，文末给出了完整的demo示例，对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。

需求分析

　　1）需要首页，末页功能

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

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

实现思路

也是分为三部分处理

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

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

　　

　　2）点击可视页码截图

　　

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

　　

代码参数说明

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="data/data.js" type="text/javascript"></script>
<script src="js/sendAjax.js" type="text/javascript"></script>
<script src="js/page.js" type="text/javascript"></script>
<script>
 /* 初始化页面 */
 var initTotalPageNum = 11;
 $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});
 </script>

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

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

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

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

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

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

代码优缺点

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

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

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

有需要的话，完整demo ，点此下载 

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • 14款经典网页图片和文字特效的jQuery插件-前端开发必备

    14款经典网页图片和文字特效的jQuery插件-前端开发必备

    最近没项目做，在网上看到很多网页特效，非常漂亮，于是就整理了14款经典网页图片和文字特效的jQuery插件，有助于在项目需求中用到，前端开发必备，大家都来学习下吧
    2015-08-08
  • JQuery使用数组遍历跳出each循环

    JQuery使用数组遍历跳出each循环

    这篇文章主要介绍了JQuery使用数组遍历跳出each循环,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • jquery控制listbox中项的移动并排序

    jquery控制listbox中项的移动并排序

    以下是用jquery控制ASP.NET中的两个asp:listbox控件中选择项的移动。
    2009-11-11
  • 推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架

    在进行Web开发时，并非所有的库都适合你的项目，但你仍需要收藏一些Web UI设计相关的库或框架，以在你需要的时候，加快你的开发效率。本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架
    2014-08-08
  • jQuery jcrop插件截图使用方法

    jQuery jcrop插件截图使用方法

    项目需要做一个头像截取的功能，类似于QQ头像截取功能。在网上搜了下，最后使用jQuery插件jcrop来截取
    2013-11-11
  • jQuery实现的数值范围range2dslider选取插件特效多款代码分享

    jQuery实现的数值范围range2dslider选取插件特效多款代码分享

    这篇文章主要介绍了jQuery实现的数值范围range2dslider选取插件特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下
    2015-08-08
  • jQuery找出网页上最高元素的方法

    jQuery找出网页上最高元素的方法

    这篇文章主要介绍了jQuery找出网页上最高元素的方法,实例分析了jQuery遍历元素与获取元素高度的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 深入探秘jquery瀑布流的实现

    深入探秘jquery瀑布流的实现

    瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。
    2016-01-01
  • jQuery之过滤元素操作小结

    jQuery之过滤元素操作小结

    这篇文章主要介绍了jQuery中的过滤元素操作。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 在jquery中combobox多选的不兼容问题总结

    在jquery中combobox多选的不兼容问题总结

    最近在IE10中开发jquery，关于jquery中combobox多选不能兼容的问题，进行一些总结，感兴趣的朋友可以了解下
    2013-12-12

最新评论