`
caiceclb
  • 浏览: 242028 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jQuery内容分页

阅读更多

 

 
        /* paginate follow */
		var args = {
			sliceTag: "dl",
			sliceSize: 10,
			pageNumShow: 'p.pageNum',
			curr: "curr"
		};
		/* 分页内容的集合 */
		var $slice;
		/* 总数 */
		var count;
		/* 页码挂载点 */
		var $show = $(args.pageNumShow);
		/* 总页数 */
		var numCount;
		var pn = function(){
			$slice = $(args.sliceTag);
			count = $slice.size(); /* Math.ceil(), 向上舍入函数,得到页数的好东东 */
numCount = Math.ceil(count / args.sliceSize); /* 页码html片段 */ var pageHtml = "页码: "; if (!numCount) { return; } for (var i = 1; i <= numCount ; i++ ) { pageHtml += "<a rel='" + i + "'>" + i + "</a>"; } /* 除了第一次生成的,以后定位的页码 */ var currNum = $("a.curr", $show).attr("rel"); $show.html(pageHtml); view(currNum); }; var view = function(num){ num = num || 1; $("a", $show).removeClass(args.curr).filter("[rel='" + num + "']").addClass(args.curr); $slice.hide().slice(args.sliceSize * (num - 1), args.sliceSize * num).show(); }; $("a", $show).live("click", function() { if($(this).hasClass("curr")) { return; }; // $("a.curr", $show).removeClass("curr"); var num = $(this).attr("rel"); // $(this).add($("a[rel="+num+"]", $show)).addClass("curr"); view(num); });
分享到:
评论

相关推荐

    jquery实现内容分页

    jquery实现内容分页,比较简单啊,哈哈

    Jquery Ajax分页(有实例)

    这极大地提升了交互性,使得用户在浏览分页内容时,体验更加流畅。jQuery封装了AJAX操作,提供了一套简洁的API,如`$.ajax()`, `$.get()`, `$.post()`等,使开发者能够轻松地实现AJAX请求。 分页通常分为两种类型:...

    jquery pagination 分页组件 2.5.0

    jquery pagination 分页组件 jquery pagination 分页组件 jquery pagination 分页组件 官网 https://pagination.js.org/index.html 文档 https://pagination.js.org/docs/index.html

    jQuery静态分页插件.zip

    jQuery静态分页插件是一种广泛应用于网页开发中的组件,它能帮助开发者轻松地在大量数据中实现分页显示,提高用户体验。在这个名为"jQuery静态分页插件.zip"的压缩包中,包含了实现这一功能所需的全部资源。接下来,...

    JQuery做静态分页

    JQuery做静态分页

    使用jquery实现表格动态分页

    **一、jQuery分页插件的选择与使用** jQuery提供了许多分页插件,例如`jQuery DataTables`、`jQuery Pagination`等。以`jQuery DataTables`为例,它是广泛使用的表格增强插件,内置了强大的分页功能。 1. **安装和...

    jquery mobile分页显示插件

    在处理大量数据时,分页是必不可少的功能,它帮助用户更有效地浏览内容,而不是一次性加载所有信息。"jQuery Mobile 分页显示插件"正是为了解决这个问题,提供了便捷的工具来实现这一功能。 这个插件允许开发者在...

    jquery分页

    分页,并使用jquery ajax传数据。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。...

    jQuery Ajax分页插件(jquery.pagination)

    ### jQuery分页插件的基本概念 1. **Ajax**:异步JavaScript和XML,允许页面与服务器进行通信,更新部分页面内容而无需完全刷新页面。这为分页提供了便利,因为只需要获取新页面的数据,而不是整个页面。 2. **...

    jQuery图片分页切换特效.zip

    《jQuery图片分页切换特效深度解析》 在网页设计中,动态、交互式的用户体验往往能提升网站的整体吸引力。"jQuery图片分页切换特效"就是这样一种技术,它将传统的静态图片展示转化为富有动感的分页切换效果,使得...

    jQuery图片分页切换效果代码.zip

    "jQuery图片分页切换效果代码"就是一种实现这一目标的技术方案。该压缩包包含了使用jQuery库来创建分页切换图片效果的源码,主要依赖两个核心文件:jPages.js和jquery-1.8.3.min.js。 1. **jQuery**: jQuery 是一个...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`,在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    jquery插件--表格分页

    jQuery作为一个广泛使用的JavaScript库,提供了丰富的插件来帮助开发者实现各种功能,包括表格分页。本篇文章将深入探讨jQuery插件在实现表格分页中的应用及其相关知识点。 一、jQuery和表格分页基础 1. jQuery...

    jquery静态分页

    当数据量过大,一次性加载所有内容会影响页面性能并可能导致用户浏览不便时,分页就显得尤为重要。"jQuery静态分页"是利用JavaScript库jQuery实现的一种简单且高效的分页解决方案。 jQuery是一个轻量级、功能丰富的...

    jQuery通过分页加载图片列表代码.zip

    在这个“jQuery通过分页加载图片列表代码”示例中,开发者利用jQuery的功能实现了图片列表的分页加载,这在处理大量图片时非常有用,可以减少页面加载时间并提高用户体验。 首先,我们需要理解分页的基本概念。分页...

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

    在讲解jQuery实现分页功能的知识点之前,首先需要了解分页功能在网页中的重要性。分页功能可以帮助用户在浏览大量数据时,仅展示部分内容,通过页码或上下翻页按钮来分批次查看数据,从而提高页面的加载效率和用户的...

    jquery分页插件结合jsp实例

    本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages(JSP)结合,实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法,以及它与JSP的集成。 首先,`jQuery`是一种轻量级的...

    jquery 文章分页jQuery分页的解决图片和内容分页显示

    本篇文章将深入探讨如何使用jQuery来解决文章内容以及图片的分页显示问题。 首先,我们需要了解分页的基本原理。分页通常涉及两个主要步骤:数据切片和界面渲染。数据切片是指将原始的长篇文章或包含图片的数据分割...

    jquery animate分页按钮.zip

    《jQuery Animate分页按钮详解及其应用》 在网页开发中,用户界面的交互性是提升用户体验的关键因素之一。jQuery Animate分页按钮是一种巧妙的交互设计,它通过动画效果增强了分页功能的视觉吸引力,使得用户在浏览...

    jquery动态分页数据获取代码

    3. **数据处理**:服务器返回数据后,jQuery 会触发回调函数,此时可以将新数据插入到页面的适当位置,替换或添加现有内容。 4. **更新分页导航**:根据返回的总页数,更新分页导航的状态,例如禁用无法点击的“上...

Global site tag (gtag.js) - Google Analytics