<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Pagination分页插件ajax demo</title>
<link rel="stylesheet" href="lib/pagination.css" />
<style type="text/css">
body{font-size:84%; color:#333333; line-height:1.4;}
a{color:#34538b;}
#Searchresult{width:300px; height:100px; padding:20px; background:#f0f3f9;}
</style>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
//此demo通过Ajax加载分页元素
var initPagination = function() {
var num_entries = $("#hiddenresult div.result").length;
// 创建分页
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 1, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
};
function pageselectCallback(page_index, jq){
var new_content = $("#hiddenresult div.result:eq("+page_index+")").clone();
$("#Searchresult").empty().append(new_content); //装载对应分页的内容
return false;
}
//ajax加载
$("#hiddenresult").load("load.html", null, initPagination);
});
</script>
</head>
<body>
<h1>jQuery Pagination分页插件ajax demo</h1>
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>
<div id="hiddenresult" style="display:none;">
<!-- 列表元素 -->
</div>
</body>
</html>
分享到：
相关推荐
**jQuery分页插件**是Web开发中常用的一种工具，用于在大量数据中实现高效的页面导航，提升用户体验。本资源包含一个演示说明，使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...
本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages（JSP）结合，实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法，以及它与JSP的集成。 首先，`jQuery`是一种轻量级的...
在本教程中，我们将深入探讨jQuery分页插件的使用方法、核心功能和优点。 首先，jQuery分页插件的工作原理是通过JavaScript库jQuery来动态加载和展示页面内容。当用户点击分页按钮时，插件会向服务器发送请求，获取...
本篇文章将详细讲解如何使用jQuery分页插件来设置分页内容显示的数量。 首先，我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择，例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-...
本知识点将详细讲解如何使用jQuery分页插件实现带总数的分页代码。 首先，我们需要一个分页插件。这里提到的"jquery分页插件带总数分页代码"可能是指包含总条数显示功能的插件，例如"jQuery Pagination Plugin with...
jQueryPager是一款轻量级的jQuery分页插件，它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`，在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...
以下是对"五款漂亮的jquery分页插件"的详细分析： 1. **Bootstrap Pagination** Bootstrap是广泛使用的前端框架，它自带的Pagination组件简洁而实用。这款jQuery分页插件具有响应式设计，可以自适应不同设备的屏幕...
在网页开发中，数据展示往往...接着，选择一个合适的jQuery分页插件。这里我们假设已有一个名为"pagination.js"的插件文件，包含必要的分页功能。将该文件与HTML文件一同放在项目目录中，并在页面底部引入： ```html ...
总结来说，JS+jQuery分页插件通过利用jQuery库的强大功能，结合CSS样式表，可以轻松实现网页的高效分页功能，提高用户在浏览大量数据时的体验。对于前端开发者而言，理解并掌握这种插件的使用和实现原理，有助于提升...
**jQuery分页插件简介** 在网页开发中，分页是一种常见的数据展示方式，它能够帮助用户有效地浏览大量数据，避免一次性加载过多内容导致页面响应变慢或内存消耗过大。jQuery是一个轻量级的JavaScript库，它简化了...
jQuery分页插件是网页开发中常用的一种工具，它能够帮助开发者轻松地在大量数据中实现页面的分段展示，提高用户体验，同时减轻服务器负担。本文将深入探讨jQuery分页插件的工作原理、优势以及如何在实际项目中进行...
**jQuery分页插件**是Web开发中常用的一种工具，主要用于处理大数据量的展示，将大量数据分成多个小部分，以便用户能够轻松地在不同页面间浏览。在网页设计中，尤其是在内容管理系统、电子商务网站或者数据报表应用...
实现效果： 结合CSS3实现的jQuery分页插件,分页的效果是很常用的，无论是前台还是后端管理系统，都会使用到分页，在企业站或商城网站中都是很实用的。php中文网推荐下载！
JQuery分页插件是解决这个问题的一种高效方案，它能够帮助开发者轻松地实现动态加载和分页显示数据，提高用户体验。本篇将详细介绍这款简单轻巧的Jquery分页插件，并探讨其核心功能和应用场景。 Jquery分页插件是...
jQuery分页插件通过计算总数据量和每页显示的数量来确定页码总数，并根据当前页数展示对应的数据。 ### 2. 插件设计 一个好的jQuery分页插件应具备以下特性： - **自定义配置**：允许开发者设置每页显示的条目数...
jQuery分页插件是实现这一功能的强大工具，它简化了JavaScript代码，让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先，我们需要了解jQuery分页的...
本项目涉及的是一个自定义的 jQuery 分页插件，用于实现数据的分页展示，提高用户体验，特别是处理大量数据时。下面将详细介绍这三个技术以及分页插件的相关知识点。 **HTML（HyperText Markup Language）** 是网页...
本资源"多款jQuery分页插件特效.zip"包含了多种jQuery分页插件的代码示例，供开发者学习和参考。 1. jQuery分页原理： jQuery分页插件通常是基于HTML、CSS和JavaScript构建的。它们通过监听用户的交互事件（如点击...
本教程将深入探讨如何使用jQuery分页插件与CSS3技术，来创建具有独特视觉效果的个性化分页代码特效。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在分页功能中，...