jQuery UI分页组件开发详解打造高效数据展示方案

引言

在当今数据驱动的Web应用中，高效地展示大量数据是一项常见且关键的任务。无论是电商网站的产品列表、社交媒体的信息流，还是企业管理系统的数据报表，都需要通过分页技术来提升用户体验和系统性能。jQuery UI作为一套基于jQuery的用户界面交互库，提供了丰富的UI组件和交互效果，其中分页组件是处理大量数据展示的理想选择。

jQuery UI分页组件不仅提供了基本的分页功能，还支持高度自定义，可以满足各种复杂的业务需求。本文将详细介绍如何使用jQuery UI开发分页组件，并通过实际案例展示如何打造高效的数据展示方案。

jQuery UI分页组件基础

什么是jQuery UI分页组件

jQuery UI分页组件是一个用户界面控件，用于将大量数据分割成多个页面，使用户可以方便地浏览和导航这些数据。它提供了直观的导航界面，包括页码按钮、上一页/下一页按钮等，使用户可以快速跳转到指定页面。

环境准备

在使用jQuery UI分页组件之前，我们需要准备必要的开发环境：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI分页组件示例</title> <!-- 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI库 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <!-- 自定义样式 --> <style> .data-container { margin: 20px 0; min-height: 300px; } .data-item { padding: 10px; border-bottom: 1px solid #eee; } .pagination-container { margin: 20px 0; text-align: center; } /* 自定义分页样式 */ .custom-pagination .ui-state-default { border: 1px solid #ddd; background: #f9f9f9; color: #333; } .custom-pagination .ui-state-active { border: 1px solid #007cba; background: #007cba; color: white; } .custom-pagination .ui-state-hover { border: 1px solid #007cba; background: #f2f8fd; } </style> </head> <body> <div class="container"> <h1>jQuery UI分页组件示例</h1> <!-- 数据展示区域 --> <div class="data-container" id="dataContainer"> <!-- 数据将通过JavaScript动态加载 --> </div> <!-- 分页控件容器 --> <div class="pagination-container" id="paginationContainer"> <!-- 分页控件将通过JavaScript动态生成 --> </div> </div> <script> // JavaScript代码将在后续章节中添加 </script> </body> </html>

基本分页实现

下面是一个基本的jQuery UI分页组件实现示例：

$(document).ready(function() { // 模拟数据 var totalItems = 100; // 总数据条数 var itemsPerPage = 10; // 每页显示条数 var totalPages = Math.ceil(totalItems / itemsPerPage); // 总页数 // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: 1, // 当前页 length: 7, // 显示的页码数量 size: 2, // 当前页两边的页码数量 prev: '上一页', next: '下一页', click: function(options) { // 获取当前页码 var currentPage = options.current; // 加载当前页数据 loadData(currentPage); // 返回false阻止默认跳转行为 return false; } }); // 加载第一页数据 loadData(1); // 加载数据函数 function loadData(page) { // 计算当前页的数据范围 var start = (page - 1) * itemsPerPage; var end = start + itemsPerPage; // 清空数据容器 $("#dataContainer").empty(); // 模拟数据加载 for (var i = start; i < end && i < totalItems; i++) { var item = $("<div class='data-item'>数据项 " + (i + 1) + "</div>"); $("#dataContainer").append(item); } } });

在这个基本示例中，我们创建了一个简单的分页组件，它可以显示100条模拟数据，每页显示10条。用户可以通过点击分页按钮来浏览不同页面的数据。

分页组件的配置选项

jQuery UI分页组件提供了丰富的配置选项，可以根据实际需求进行定制。下面详细介绍这些配置选项：

基本配置选项

$("#paginationContainer").pagination({ total: 10, // 总页数 current: 1, // 当前页码 length: 7, // 显示的页码数量 size: 2, // 当前页两边的页码数量 prev: '上一页', // 上一页按钮文本 next: '下一页', // 下一页按钮文本 first: '首页', // 首页按钮文本 last: '末页', // 末页按钮文本 href: '#', // 链接格式，可以使用{{page}}作为页码占位符 ajax: false, // 是否使用AJAX加载 callback: function(page) { // 页面点击回调函数 console.log("当前页码: " + page); } });

高级配置选项

$("#paginationContainer").pagination({ // 基本配置 total: 20, current: 1, // 样式配置 className: 'custom-pagination', // 自定义CSS类名 disableClass: 'ui-state-disabled', // 禁用状态的CSS类名 activeClass: 'ui-state-active', // 激活状态的CSS类名 hoverClass: 'ui-state-hover', // 悬停状态的CSS类名 // 回调函数 click: function(options) { // options包含当前分页的所有信息 console.log("当前页码: " + options.current); console.log("总页数: " + options.total); // 加载数据 loadData(options.current); // 返回false阻止默认跳转行为 return false; }, // 格式化函数 format: function(type) { switch(type) { case 'prev': return '<i class="icon-prev"></i>'; case 'next': return '<i class="icon-next"></i>'; case 'first': return '<i class="icon-first"></i>'; case 'last': return '<i class="icon-last"></i>'; default: return type; } } });

动态配置分页选项

有时候，我们需要根据数据的变化动态调整分页配置。下面是一个动态配置分页选项的示例：

// 初始配置 var paginationOptions = { total: 10, current: 1, length: 7, size: 2, click: function(options) { loadData(options.current); return false; } }; // 初始化分页组件 $("#paginationContainer").pagination(paginationOptions); // 更新分页配置的函数 function updatePagination(newTotal, newCurrent) { // 更新配置 paginationOptions.total = newTotal; paginationOptions.current = newCurrent; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 $("#paginationContainer").pagination(paginationOptions); } // 模拟数据变化后的分页更新 function simulateDataChange() { // 假设数据总量变为50 var newTotal = 50; var newCurrent = 1; // 更新分页 updatePagination(newTotal, newCurrent); // 加载第一页数据 loadData(newCurrent); } // 模拟点击事件 $("#simulateChangeBtn").click(function() { simulateDataChange(); });

自定义分页组件

jQuery UI分页组件的一个强大之处在于它的高度可定制性。我们可以根据项目需求自定义分页组件的外观和行为。

自定义样式

通过CSS自定义分页组件的样式是最常见的需求。下面是一个自定义样式的示例：

/* 自定义分页容器样式 */ .custom-pagination { display: flex; justify-content: center; align-items: center; margin: 20px 0; font-family: Arial, sans-serif; } /* 分页按钮通用样式 */ .custom-pagination .ui-state-default { display: flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; margin: 0 5px; padding: 0 10px; border: 1px solid #ddd; background: #f9f9f9; color: #333; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } /* 当前页按钮样式 */ .custom-pagination .ui-state-active { border: 1px solid #007cba; background: #007cba; color: white; font-weight: bold; } /* 悬停状态样式 */ .custom-pagination .ui-state-hover { border: 1px solid #007cba; background: #f2f8fd; color: #007cba; } /* 禁用状态样式 */ .custom-pagination .ui-state-disabled { border: 1px solid #eee; background: #f5f5f5; color: #aaa; cursor: not-allowed; opacity: 0.7; } /* 省略号样式 */ .custom-pagination .ui-state-ellipsis { margin: 0 5px; color: #666; } /* 导航按钮特殊样式 */ .custom-pagination .ui-state-prev, .custom-pagination .ui-state-next { min-width: 80px; } /* 首页和末页按钮特殊样式 */ .custom-pagination .ui-state-first, .custom-pagination .ui-state-last { min-width: 60px; }

自定义分页结构

有时候，我们需要完全自定义分页组件的HTML结构。下面是一个自定义分页结构的示例：

$("#paginationContainer").pagination({ total: 20, current: 1, // 自定义分页结构 renderer: function(type, options) { var html = ''; // 渲染容器 if (type === 'container') { html = '<div class="custom-pagination">' + options.inner + '</div>'; } // 渲染上一页按钮 else if (type === 'prev') { if (options.current > 1) { html = '<a href="#" class="ui-state-default ui-state-prev" data-page="' + (options.current - 1) + '">' + options.prev + '</a>'; } else { html = '<span class="ui-state-default ui-state-disabled ui-state-prev">' + options.prev + '</span>'; } } // 渲染下一页按钮 else if (type === 'next') { if (options.current < options.total) { html = '<a href="#" class="ui-state-default ui-state-next" data-page="' + (options.current + 1) + '">' + options.next + '</a>'; } else { html = '<span class="ui-state-default ui-state-disabled ui-state-next">' + options.next + '</span>'; } } // 渲染首页按钮 else if (type === 'first') { if (options.current > 1) { html = '<a href="#" class="ui-state-default ui-state-first" data-page="1">' + options.first + '</a>'; } else { html = '<span class="ui-state-default ui-state-disabled ui-state-first">' + options.first + '</span>'; } } // 渲染末页按钮 else if (type === 'last') { if (options.current < options.total) { html = '<a href="#" class="ui-state-default ui-state-last" data-page="' + options.total + '">' + options.last + '</a>'; } else { html = '<span class="ui-state-default ui-state-disabled ui-state-last">' + options.last + '</span>'; } } // 渲染页码按钮 else if (type === 'page') { if (options.value === options.current) { html = '<span class="ui-state-default ui-state-active">' + options.value + '</span>'; } else { html = '<a href="#" class="ui-state-default" data-page="' + options.value + '">' + options.value + '</a>'; } } // 渲染省略号 else if (type === 'ellipsis') { html = '<span class="ui-state-ellipsis">...</span>'; } return html; }, // 点击事件处理 click: function(options) { loadData(options.current); return false; } });

添加额外功能

我们还可以为分页组件添加一些额外的功能，如跳转到指定页、显示每页条数选择等。下面是一个添加了这些功能的示例：

<!-- 分页控件容器 --> <div class="pagination-wrapper"> <div class="pagination-container" id="paginationContainer"></div> <!-- 额外功能容器 --> <div class="pagination-extra"> <!-- 跳转到指定页 --> <div class="pagination-jump"> 跳转到第 <input type="number" id="jumpPageInput" min="1" max="20" value="1"> 页 <button id="jumpPageBtn">跳转</button> </div> <!-- 每页显示条数选择 --> <div class="pagination-size"> 每页显示 <select id="pageSizeSelect"> <option value="5">5条</option> <option value="10" selected>10条</option> <option value="20">20条</option> <option value="50">50条</option> </select> </div> <!-- 显示信息 --> <div class="pagination-info"> 显示第 <span id="startItem">1</span> 到 <span id="endItem">10</span> 条，共 <span id="totalItems">200</span> 条 </div> </div> </div>

/* 额外功能样式 */ .pagination-wrapper { margin: 20px 0; } .pagination-extra { display: flex; justify-content: center; align-items: center; margin-top: 10px; font-size: 14px; color: #666; } .pagination-jump, .pagination-size, .pagination-info { margin: 0 15px; } .pagination-jump input, .pagination-jump button, .pagination-size select { margin: 0 5px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; } .pagination-jump button { background: #f9f9f9; cursor: pointer; } .pagination-jump button:hover { background: #f2f8fd; border-color: #007cba; }

// 全局变量 var totalItems = 200; // 总数据条数 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalPages = Math.ceil(totalItems / itemsPerPage); // 总页数 // 初始化分页组件 function initPagination() { $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', first: '首页', last: '末页', click: function(options) { currentPage = options.current; loadData(currentPage); updatePaginationInfo(); return false; } }); // 更新分页信息 updatePaginationInfo(); } // 更新分页信息 function updatePaginationInfo() { // 计算当前页的数据范围 var startItem = (currentPage - 1) * itemsPerPage + 1; var endItem = Math.min(currentPage * itemsPerPage, totalItems); // 更新显示信息 $("#startItem").text(startItem); $("#endItem").text(endItem); $("#totalItems").text(totalItems); // 更新跳转页输入框的最大值 $("#jumpPageInput").attr("max", totalPages); $("#jumpPageInput").val(currentPage); } // 加载数据 function loadData(page) { // 计算当前页的数据范围 var start = (page - 1) * itemsPerPage; var end = start + itemsPerPage; // 清空数据容器 $("#dataContainer").empty(); // 模拟数据加载 for (var i = start; i < end && i < totalItems; i++) { var item = $("<div class='data-item'>数据项 " + (i + 1) + "</div>"); $("#dataContainer").append(item); } } // 跳转到指定页 $("#jumpPageBtn").click(function() { var jumpPage = parseInt($("#jumpPageInput").val()); // 验证输入 if (isNaN(jumpPage) || jumpPage < 1 || jumpPage > totalPages) { alert("请输入有效的页码（1-" + totalPages + "）"); return; } // 更新当前页码 currentPage = jumpPage; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); // 加载数据 loadData(currentPage); }); // 每页显示条数改变 $("#pageSizeSelect").change(function() { // 获取新的每页显示条数 var newItemsPerPage = parseInt($(this).val()); // 更新每页显示条数 itemsPerPage = newItemsPerPage; // 重新计算总页数 totalPages = Math.ceil(totalItems / itemsPerPage); // 如果当前页超过总页数，则设置当前页为最后一页 if (currentPage > totalPages) { currentPage = totalPages; } // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); // 加载数据 loadData(currentPage); }); // 页面加载完成后初始化 $(document).ready(function() { initPagination(); loadData(currentPage); });

与后端数据交互

在实际应用中，分页组件通常需要与后端进行数据交互，动态加载数据。下面介绍如何使用jQuery UI分页组件与后端进行数据交互。

基本AJAX分页

下面是一个使用AJAX从后端获取数据的分页示例：

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 // 初始化分页组件 function initPagination() { // 先获取总数据条数 $.ajax({ url: '/api/data/count', type: 'GET', dataType: 'json', success: function(response) { if (response.success) { totalItems = response.count; totalPages = Math.ceil(totalItems / itemsPerPage); // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', click: function(options) { currentPage = options.current; loadData(currentPage); return false; } }); // 加载第一页数据 loadData(currentPage); } else { alert("获取数据总数失败: " + response.message); } }, error: function(xhr, status, error) { alert("获取数据总数时发生错误: " + error); } }); } // 加载数据 function loadData(page) { // 显示加载中提示 $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); // 发送AJAX请求获取数据 $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage }, success: function(response) { if (response.success) { // 清空数据容器 $("#dataContainer").empty(); // 渲染数据 if (response.data && response.data.length > 0) { $.each(response.data, function(index, item) { var itemHtml = '<div class="data-item">' + '<h3>' + item.title + '</h3>' + '<p>' + item.description + '</p>' + '</div>'; $("#dataContainer").append(itemHtml); }); } else { $("#dataContainer").html('<div class="no-data">暂无数据</div>'); } } else { $("#dataContainer").html('<div class="error">加载数据失败: ' + response.message + '</div>'); } }, error: function(xhr, status, error) { $("#dataContainer").html('<div class="error">加载数据时发生错误: ' + error + '</div>'); } }); } // 页面加载完成后初始化 $(document).ready(function() { initPagination(); });

带搜索和筛选的分页

在实际应用中，我们通常需要结合搜索和筛选功能来实现更复杂的数据展示。下面是一个带搜索和筛选的分页示例：

<!-- 搜索和筛选区域 --> <div class="search-filter-container"> <div class="search-box"> <input type="text" id="searchInput" placeholder="搜索关键词..."> <button id="searchBtn">搜索</button> </div> <div class="filter-box"> <select id="categoryFilter"> <option value="">所有分类</option> <option value="1">分类一</option> <option value="2">分类二</option> <option value="3">分类三</option> </select> <select id="sortFilter"> <option value="default">默认排序</option> <option value="date_desc">日期降序</option> <option value="date_asc">日期升序</option> <option value="name_asc">名称升序</option> <option value="name_desc">名称降序</option> </select> </div> </div> <!-- 数据展示区域 --> <div class="data-container" id="dataContainer"> <!-- 数据将通过JavaScript动态加载 --> </div> <!-- 分页控件容器 --> <div class="pagination-container" id="paginationContainer"> <!-- 分页控件将通过JavaScript动态生成 --> </div>

/* 搜索和筛选区域样式 */ .search-filter-container { display: flex; justify-content: space-between; align-items: center; margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 4px; } .search-box { display: flex; align-items: center; } .search-box input { width: 250px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; outline: none; } .search-box button { padding: 8px 15px; border: 1px solid #007cba; background: #007cba; color: white; border-radius: 0 4px 4px 0; cursor: pointer; } .search-box button:hover { background: #005a8e; } .filter-box select { margin-left: 15px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; outline: none; } /* 加载中、无数据、错误提示样式 */ .loading, .no-data, .error { padding: 20px; text-align: center; color: #666; } .error { color: #d9534f; }

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var searchKeyword = ''; // 搜索关键词 var categoryFilter = ''; // 分类筛选 var sortFilter = 'default'; // 排序方式 // 初始化分页组件 function initPagination() { // 先获取总数据条数 $.ajax({ url: '/api/data/count', type: 'GET', dataType: 'json', data: { keyword: searchKeyword, category: categoryFilter }, success: function(response) { if (response.success) { totalItems = response.count; totalPages = Math.ceil(totalItems / itemsPerPage); // 如果当前页超过总页数，则设置当前页为最后一页 if (currentPage > totalPages && totalPages > 0) { currentPage = totalPages; } // 如果没有数据，则当前页设为1 if (totalPages === 0) { currentPage = 1; } // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', click: function(options) { currentPage = options.current; loadData(currentPage); return false; } }); // 加载数据 loadData(currentPage); } else { alert("获取数据总数失败: " + response.message); } }, error: function(xhr, status, error) { alert("获取数据总数时发生错误: " + error); } }); } // 加载数据 function loadData(page) { // 显示加载中提示 $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); // 发送AJAX请求获取数据 $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage, keyword: searchKeyword, category: categoryFilter, sort: sortFilter }, success: function(response) { if (response.success) { // 清空数据容器 $("#dataContainer").empty(); // 渲染数据 if (response.data && response.data.length > 0) { $.each(response.data, function(index, item) { var itemHtml = '<div class="data-item">' + '<h3>' + item.title + '</h3>' + '<p>' + item.description + '</p>' + '<div class="item-meta">' + '<span class="category">分类: ' + item.category + '</span>' + '<span class="date">日期: ' + item.date + '</span>' + '</div>' + '</div>'; $("#dataContainer").append(itemHtml); }); } else { $("#dataContainer").html('<div class="no-data">暂无数据</div>'); } } else { $("#dataContainer").html('<div class="error">加载数据失败: ' + response.message + '</div>'); } }, error: function(xhr, status, error) { $("#dataContainer").html('<div class="error">加载数据时发生错误: ' + error + '</div>'); } }); } // 搜索按钮点击事件 $("#searchBtn").click(function() { // 获取搜索关键词 searchKeyword = $("#searchInput").val().trim(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 搜索框回车事件 $("#searchInput").keypress(function(e) { if (e.which === 13) { // 回车键 $("#searchBtn").click(); } }); // 分类筛选改变事件 $("#categoryFilter").change(function() { // 获取选择的分类 categoryFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 排序方式改变事件 $("#sortFilter").change(function() { // 获取选择的排序方式 sortFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 页面加载完成后初始化 $(document).ready(function() { initPagination(); });

使用Promise优化AJAX请求

为了更好地处理AJAX请求，我们可以使用Promise来优化代码。下面是一个使用Promise优化的示例：

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var searchKeyword = ''; // 搜索关键词 var categoryFilter = ''; // 分类筛选 var sortFilter = 'default'; // 排序方式 // 封装AJAX请求为Promise function ajaxPromise(options) { return new Promise(function(resolve, reject) { $.ajax(options) .done(resolve) .fail(reject); }); } // 获取数据总数 function getDataCount() { return ajaxPromise({ url: '/api/data/count', type: 'GET', dataType: 'json', data: { keyword: searchKeyword, category: categoryFilter } }); } // 获取数据 function getData(page) { return ajaxPromise({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage, keyword: searchKeyword, category: categoryFilter, sort: sortFilter } }); } // 初始化分页组件 function initPagination() { // 显示加载中提示 $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); // 获取数据总数 getDataCount() .then(function(response) { if (response.success) { totalItems = response.count; totalPages = Math.ceil(totalItems / itemsPerPage); // 如果当前页超过总页数，则设置当前页为最后一页 if (currentPage > totalPages && totalPages > 0) { currentPage = totalPages; } // 如果没有数据，则当前页设为1 if (totalPages === 0) { currentPage = 1; } // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', click: function(options) { currentPage = options.current; loadData(currentPage); return false; } }); // 加载数据 return loadData(currentPage); } else { throw new Error(response.message || "获取数据总数失败"); } }) .catch(function(error) { alert("获取数据总数时发生错误: " + error); }); } // 加载数据 function loadData(page) { // 显示加载中提示 $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); // 获取数据 getData(page) .then(function(response) { if (response.success) { // 清空数据容器 $("#dataContainer").empty(); // 渲染数据 if (response.data && response.data.length > 0) { $.each(response.data, function(index, item) { var itemHtml = '<div class="data-item">' + '<h3>' + item.title + '</h3>' + '<p>' + item.description + '</p>' + '<div class="item-meta">' + '<span class="category">分类: ' + item.category + '</span>' + '<span class="date">日期: ' + item.date + '</span>' + '</div>' + '</div>'; $("#dataContainer").append(itemHtml); }); } else { $("#dataContainer").html('<div class="no-data">暂无数据</div>'); } } else { throw new Error(response.message || "加载数据失败"); } }) .catch(function(error) { $("#dataContainer").html('<div class="error">加载数据时发生错误: ' + error + '</div>'); }); } // 搜索按钮点击事件 $("#searchBtn").click(function() { // 获取搜索关键词 searchKeyword = $("#searchInput").val().trim(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 搜索框回车事件 $("#searchInput").keypress(function(e) { if (e.which === 13) { // 回车键 $("#searchBtn").click(); } }); // 分类筛选改变事件 $("#categoryFilter").change(function() { // 获取选择的分类 categoryFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 排序方式改变事件 $("#sortFilter").change(function() { // 获取选择的排序方式 sortFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 页面加载完成后初始化 $(document).ready(function() { initPagination(); });

性能优化

在处理大量数据时，分页组件的性能优化非常重要。下面介绍几种优化jQuery UI分页组件性能的方法。

数据缓存

通过缓存已加载的数据，可以减少不必要的AJAX请求，提高用户体验：

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var dataCache = {}; // 数据缓存对象 // 加载数据 function loadData(page) { // 检查缓存中是否已有数据 if (dataCache[page]) { renderData(dataCache[page]); return; } // 显示加载中提示 $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); // 发送AJAX请求获取数据 $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage }, success: function(response) { if (response.success) { // 缓存数据 dataCache[page] = response.data; // 渲染数据 renderData(response.data); } else { $("#dataContainer").html('<div class="error">加载数据失败: ' + response.message + '</div>'); } }, error: function(xhr, status, error) { $("#dataContainer").html('<div class="error">加载数据时发生错误: ' + error + '</div>'); } }); } // 渲染数据 function renderData(data) { // 清空数据容器 $("#dataContainer").empty(); // 渲染数据 if (data && data.length > 0) { $.each(data, function(index, item) { var itemHtml = '<div class="data-item">' + '<h3>' + item.title + '</h3>' + '<p>' + item.description + '</p>' + '</div>'; $("#dataContainer").append(itemHtml); }); } else { $("#dataContainer").html('<div class="no-data">暂无数据</div>'); } } // 清除缓存 function clearCache() { dataCache = {}; } // 当搜索或筛选条件改变时，清除缓存 $("#searchBtn, #categoryFilter, #sortFilter").on("click change", function() { clearCache(); });

预加载相邻页面

通过预加载当前页的相邻页面，可以提高用户浏览数据时的流畅度：

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var dataCache = {}; // 数据缓存对象 var isLoading = false; // 是否正在加载数据 // 加载数据 function loadData(page, isPreload) { // 检查缓存中是否已有数据 if (dataCache[page]) { if (!isPreload) { renderData(dataCache[page]); } return; } // 如果是预加载且当前已经在加载中，则跳过 if (isPreload && isLoading) { return; } // 如果不是预加载，显示加载中提示 if (!isPreload) { $("#dataContainer").html('<div class="loading">加载中，请稍候...</div>'); isLoading = true; } // 发送AJAX请求获取数据 $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage }, success: function(response) { if (response.success) { // 缓存数据 dataCache[page] = response.data; // 如果不是预加载，渲染数据 if (!isPreload) { renderData(response.data); // 预加载相邻页面 preloadAdjacentPages(page); } } else if (!isPreload) { $("#dataContainer").html('<div class="error">加载数据失败: ' + response.message + '</div>'); } // 重置加载状态 isLoading = false; }, error: function(xhr, status, error) { if (!isPreload) { $("#dataContainer").html('<div class="error">加载数据时发生错误: ' + error + '</div>'); } // 重置加载状态 isLoading = false; } }); } // 预加载相邻页面 function preloadAdjacentPages(currentPage) { // 预加载上一页 if (currentPage > 1) { loadData(currentPage - 1, true); } // 预加载下一页 if (currentPage < totalPages) { loadData(currentPage + 1, true); } } // 分页点击事件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', click: function(options) { currentPage = options.current; loadData(currentPage); return false; } });

虚拟滚动

对于特别大的数据集，可以考虑使用虚拟滚动技术，只渲染可视区域内的数据：

<!-- 数据容器 --> <div class="virtual-scroll-container" id="virtualScrollContainer"> <!-- 虚拟滚动内容 --> <div class="virtual-scroll-content" id="virtualScrollContent"></div> <!-- 虚拟滚动占位符 --> <div class="virtual-scroll-spacer" id="virtualScrollSpacer"></div> </div> <!-- 分页控件容器 --> <div class="pagination-container" id="paginationContainer"></div>

/* 虚拟滚动容器样式 */ .virtual-scroll-container { position: relative; height: 500px; overflow-y: auto; border: 1px solid #ddd; margin: 20px 0; } .virtual-scroll-content { position: absolute; top: 0; left: 0; right: 0; } .virtual-scroll-spacer { width: 1px; }

// 全局变量 var itemsPerPage = 10; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var itemHeight = 50; // 每个数据项的高度 var visibleItems = 0; // 可见区域内的数据项数量 var dataCache = {}; // 数据缓存对象 // 初始化虚拟滚动 function initVirtualScroll() { var container = $("#virtualScrollContainer"); var content = $("#virtualScrollContent"); var spacer = $("#virtualScrollSpacer"); // 计算可见区域内的数据项数量 visibleItems = Math.ceil(container.height() / itemHeight) + 2; // 多加载2个用于缓冲 // 设置占位符高度 spacer.height(totalItems * itemHeight); // 监听滚动事件 container.on("scroll", function() { var scrollTop = container.scrollTop(); var startIndex = Math.floor(scrollTop / itemHeight); // 更新内容位置 content.css("top", startIndex * itemHeight + "px"); // 加载可见区域内的数据 loadVisibleItems(startIndex); }); // 初始加载 loadVisibleItems(0); } // 加载可见区域内的数据 function loadVisibleItems(startIndex) { var endIndex = Math.min(startIndex + visibleItems, totalItems); var content = $("#virtualScrollContent"); // 清空内容 content.empty(); // 加载数据 for (var i = startIndex; i < endIndex; i++) { // 计算数据所在的页码 var page = Math.floor(i / itemsPerPage) + 1; var indexInPage = i % itemsPerPage; // 如果缓存中有数据，直接渲染 if (dataCache[page] && dataCache[page][indexInPage]) { renderItem(dataCache[page][indexInPage], i - startIndex); } else { // 否则加载该页数据 loadPage(page, function() { // 数据加载完成后，重新渲染可见区域 if (dataCache[page] && dataCache[page][indexInPage]) { renderItem(dataCache[page][indexInPage], i - startIndex); } }); } } } // 加载指定页的数据 function loadPage(page, callback) { // 如果已经在加载中或已缓存，则跳过 if (dataCache[page] || dataCache["loading_" + page]) { if (callback) callback(); return; } // 标记为正在加载 dataCache["loading_" + page] = true; // 发送AJAX请求获取数据 $.ajax({ url: '/api/data', type: 'GET', dataType: 'json', data: { page: page, size: itemsPerPage }, success: function(response) { if (response.success) { // 缓存数据 dataCache[page] = response.data; // 删除加载标记 delete dataCache["loading_" + page]; // 执行回调 if (callback) callback(); } }, error: function() { // 删除加载标记 delete dataCache["loading_" + page]; } }); } // 渲染单个数据项 function renderItem(item, position) { var content = $("#virtualScrollContent"); var itemHtml = '<div class="data-item" style="position: absolute; top: ' + (position * itemHeight) + 'px; width: 100%; height: ' + itemHeight + 'px;">' + '<h3>' + item.title + '</h3>' + '<p>' + item.description + '</p>' + '</div>'; content.append(itemHtml); } // 初始化分页组件 function initPagination() { // 先获取总数据条数 $.ajax({ url: '/api/data/count', type: 'GET', dataType: 'json', success: function(response) { if (response.success) { totalItems = response.count; totalPages = Math.ceil(totalItems / itemsPerPage); // 初始化虚拟滚动 initVirtualScroll(); // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '上一页', next: '下一页', click: function(options) { currentPage = options.current; // 计算该页的第一项索引 var startIndex = (currentPage - 1) * itemsPerPage; // 滚动到对应位置 $("#virtualScrollContainer").scrollTop(startIndex * itemHeight); return false; } }); } else { alert("获取数据总数失败: " + response.message); } }, error: function(xhr, status, error) { alert("获取数据总数时发生错误: " + error); } }); } // 页面加载完成后初始化 $(document).ready(function() { initPagination(); });

事件委托

使用事件委托可以减少事件处理程序的数量，提高性能：

// 使用事件委托处理分页点击事件 $(document).on("click", ".pagination-container a", function(e) { e.preventDefault(); var page = $(this).data("page"); if (page) { currentPage = page; loadData(currentPage); } }); // 使用事件委托处理数据项点击事件 $(document).on("click", ".data-item", function() { var itemId = $(this).data("id"); if (itemId) { // 处理数据项点击事件 console.log("点击了数据项: " + itemId); } });

实际应用案例

下面是一个完整的实际应用案例，展示如何使用jQuery UI分页组件构建一个高效的数据展示方案。这个案例包括一个产品列表页面，具有搜索、筛选、排序和分页功能。

HTML结构

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品列表 - jQuery UI分页组件示例</title> <!-- 引入jQuery库 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI库 --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <!-- 引入Font Awesome图标库 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- 自定义样式 --> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f9fa; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px 0; margin-bottom: 30px; } h1 { text-align: center; color: #2c3e50; } /* 搜索和筛选区域样式 */ .search-filter-container { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 30px; } .search-box { display: flex; margin-bottom: 15px; } .search-box input { flex: 1; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px 0 0 4px; font-size: 16px; outline: none; } .search-box button { padding: 12px 20px; background-color: #007bff; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .search-box button:hover { background-color: #0056b3; } .filter-row { display: flex; flex-wrap: wrap; gap: 15px; } .filter-group { flex: 1; min-width: 200px; } .filter-group label { display: block; margin-bottom: 5px; font-weight: 600; } .filter-group select, .filter-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; outline: none; } /* 数据展示区域样式 */ .data-container { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 30px; overflow: hidden; } .data-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: #f8f9fa; border-bottom: 1px solid #eee; } .data-count { color: #6c757d; font-size: 14px; } .view-options { display: flex; gap: 10px; } .view-option { padding: 5px 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: all 0.3s; } .view-option.active { background-color: #007bff; color: white; border-color: #007bff; } .data-content { padding: 20px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .product-list { display: flex; flex-direction: column; gap: 15px; } .product-item { border: 1px solid #eee; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .product-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .product-image { width: 100%; height: 200px; object-fit: cover; } .product-info { padding: 15px; } .product-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #2c3e50; } .product-description { font-size: 14px; color: #6c757d; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-meta { display: flex; justify-content: space-between; align-items: center; } .product-price { font-size: 18px; font-weight: 700; color: #e74c3c; } .product-category { font-size: 12px; padding: 3px 8px; background-color: #f8f9fa; border-radius: 12px; color: #6c757d; } .product-list .product-item { display: flex; flex-direction: row; } .product-list .product-image { width: 150px; height: 150px; } .product-list .product-info { flex: 1; display: flex; flex-direction: column; } /* 加载中、无数据、错误提示样式 */ .loading, .no-data, .error { padding: 40px; text-align: center; } .loading { color: #007bff; } .no-data { color: #6c757d; } .error { color: #dc3545; } /* 分页控件样式 */ .pagination-wrapper { background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px; } .pagination-container { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } .custom-pagination { display: flex; list-style: none; padding: 0; margin: 0; } .custom-pagination li { margin: 0 5px; } .custom-pagination .ui-state-default { display: flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #ddd; background: #f9f9f9; color: #333; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; } .custom-pagination .ui-state-active { border: 1px solid #007bff; background: #007bff; color: white; font-weight: bold; } .custom-pagination .ui-state-hover { border: 1px solid #007bff; background: #f2f8fd; color: #007bff; } .custom-pagination .ui-state-disabled { border: 1px solid #eee; background: #f5f5f5; color: #aaa; cursor: not-allowed; opacity: 0.7; } .custom-pagination .ui-state-ellipsis { margin: 0 5px; color: #666; } .pagination-extra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .pagination-jump, .pagination-size { display: flex; align-items: center; gap: 10px; } .pagination-jump input, .pagination-jump button, .pagination-size select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .pagination-jump button { background-color: #007bff; color: white; border-color: #007bff; cursor: pointer; transition: background-color 0.3s; } .pagination-jump button:hover { background-color: #0056b3; } .pagination-info { color: #6c757d; font-size: 14px; } /* 响应式设计 */ @media (max-width: 768px) { .filter-row { flex-direction: column; } .filter-group { width: 100%; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .pagination-extra { flex-direction: column; align-items: flex-start; } } </style> </head> <body> <header> <div class="container"> <h1>产品列表</h1> </div> </header> <main class="container"> <!-- 搜索和筛选区域 --> <section class="search-filter-container"> <div class="search-box"> <input type="text" id="searchInput" placeholder="搜索产品名称或描述..."> <button id="searchBtn"><i class="fas fa-search"></i> 搜索</button> </div> <div class="filter-row"> <div class="filter-group"> <label for="categoryFilter">产品分类</label> <select id="categoryFilter"> <option value="">所有分类</option> <option value="electronics">电子产品</option> <option value="clothing">服装</option> <option value="food">食品</option> <option value="books">图书</option> <option value="home">家居</option> </select> </div> <div class="filter-group"> <label for="priceRangeFilter">价格范围</label> <select id="priceRangeFilter"> <option value="">所有价格</option> <option value="0-100">￥0 - ￥100</option> <option value="100-500">￥100 - ￥500</option> <option value="500-1000">￥500 - ￥1000</option> <option value="1000+">￥1000以上</option> </select> </div> <div class="filter-group"> <label for="sortFilter">排序方式</label> <select id="sortFilter"> <option value="default">默认排序</option> <option value="price_asc">价格从低到高</option> <option value="price_desc">价格从高到低</option> <option value="name_asc">名称A-Z</option> <option value="name_desc">名称Z-A</option> <option value="date_desc">最新上架</option> </select> </div> </div> </section> <!-- 数据展示区域 --> <section class="data-container"> <div class="data-header"> <div class="data-count" id="dataCount">显示 0 条产品</div> <div class="view-options"> <div class="view-option active" data-view="grid"> <i class="fas fa-th"></i> </div> <div class="view-option" data-view="list"> <i class="fas fa-list"></i> </div> </div> </div> <div class="data-content" id="dataContent"> <div class="loading"><i class="fas fa-spinner fa-spin"></i> 加载中，请稍候...</div> </div> </section> <!-- 分页控件区域 --> <section class="pagination-wrapper"> <div class="pagination-container" id="paginationContainer"></div> <div class="pagination-extra"> <div class="pagination-jump"> <span>跳转到第</span> <input type="number" id="jumpPageInput" min="1" value="1"> <span>页</span> <button id="jumpPageBtn">跳转</button> </div> <div class="pagination-size"> <span>每页显示</span> <select id="pageSizeSelect"> <option value="12">12条</option> <option value="24" selected>24条</option> <option value="48">48条</option> <option value="96">96条</option> </select> </div> <div class="pagination-info" id="paginationInfo"> 显示第 1 到 24 条，共 0 条 </div> </div> </section> </main> <script> // 全局变量 var itemsPerPage = 24; // 每页显示条数 var currentPage = 1; // 当前页码 var totalItems = 0; // 总数据条数 var totalPages = 0; // 总页数 var searchKeyword = ''; // 搜索关键词 var categoryFilter = ''; // 分类筛选 var priceRangeFilter = ''; // 价格范围筛选 var sortFilter = 'default'; // 排序方式 var viewMode = 'grid'; // 视图模式 var dataCache = {}; // 数据缓存对象 var isLoading = false; // 是否正在加载数据 // 模拟产品数据 function generateMockProducts(count) { var products = []; var categories = ['electronics', 'clothing', 'food', 'books', 'home']; var categoryNames = { 'electronics': '电子产品', 'clothing': '服装', 'food': '食品', 'books': '图书', 'home': '家居' }; for (var i = 1; i <= count; i++) { var category = categories[Math.floor(Math.random() * categories.length)]; var price = Math.floor(Math.random() * 2000) + 10; products.push({ id: i, title: '产品 ' + i, description: '这是产品 ' + i + ' 的详细描述。它具有许多优秀的特性，能够满足您的各种需求。', price: price, category: category, categoryName: categoryNames[category], image: 'https://picsum.photos/seed/product' + i + '/300/200.jpg', date: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000) }); } return products; } // 模拟API请求获取产品总数 function getProductCount() { return new Promise(function(resolve, reject) { // 模拟网络延迟 setTimeout(function() { // 模拟筛选条件 var allProducts = generateMockProducts(500); var filteredProducts = filterProducts(allProducts); resolve({ success: true, count: filteredProducts.length }); }, 300); }); } // 模拟API请求获取产品数据 function getProducts(page, size) { return new Promise(function(resolve, reject) { // 模拟网络延迟 setTimeout(function() { // 模拟筛选条件 var allProducts = generateMockProducts(500); var filteredProducts = filterProducts(allProducts); // 排序 filteredProducts = sortProducts(filteredProducts); // 分页 var start = (page - 1) * size; var end = start + size; var paginatedProducts = filteredProducts.slice(start, end); resolve({ success: true, data: paginatedProducts }); }, 500); }); } // 筛选产品 function filterProducts(products) { var result = products; // 关键词筛选 if (searchKeyword) { var keyword = searchKeyword.toLowerCase(); result = result.filter(function(product) { return product.title.toLowerCase().includes(keyword) || product.description.toLowerCase().includes(keyword); }); } // 分类筛选 if (categoryFilter) { result = result.filter(function(product) { return product.category === categoryFilter; }); } // 价格范围筛选 if (priceRangeFilter) { if (priceRangeFilter === '0-100') { result = result.filter(function(product) { return product.price >= 0 && product.price <= 100; }); } else if (priceRangeFilter === '100-500') { result = result.filter(function(product) { return product.price > 100 && product.price <= 500; }); } else if (priceRangeFilter === '500-1000') { result = result.filter(function(product) { return product.price > 500 && product.price <= 1000; }); } else if (priceRangeFilter === '1000+') { result = result.filter(function(product) { return product.price > 1000; }); } } return result; } // 排序产品 function sortProducts(products) { var result = products.slice(); // 创建副本 if (sortFilter === 'price_asc') { result.sort(function(a, b) { return a.price - b.price; }); } else if (sortFilter === 'price_desc') { result.sort(function(a, b) { return b.price - a.price; }); } else if (sortFilter === 'name_asc') { result.sort(function(a, b) { return a.title.localeCompare(b.title); }); } else if (sortFilter === 'name_desc') { result.sort(function(a, b) { return b.title.localeCompare(a.title); }); } else if (sortFilter === 'date_desc') { result.sort(function(a, b) { return new Date(b.date) - new Date(a.date); }); } return result; } // 初始化分页组件 function initPagination() { // 显示加载中提示 $("#dataContent").html('<div class="loading"><i class="fas fa-spinner fa-spin"></i> 加载中，请稍候...</div>'); // 获取产品总数 getProductCount() .then(function(response) { if (response.success) { totalItems = response.count; totalPages = Math.ceil(totalItems / itemsPerPage); // 如果当前页超过总页数，则设置当前页为最后一页 if (currentPage > totalPages && totalPages > 0) { currentPage = totalPages; } // 如果没有数据，则当前页设为1 if (totalPages === 0) { currentPage = 1; } // 初始化分页组件 $("#paginationContainer").pagination({ total: totalPages, current: currentPage, length: 7, size: 2, prev: '<i class="fas fa-chevron-left"></i>', next: '<i class="fas fa-chevron-right"></i>', first: '<i class="fas fa-angle-double-left"></i>', last: '<i class="fas fa-angle-double-right"></i>', className: 'custom-pagination', click: function(options) { currentPage = options.current; loadData(currentPage); return false; } }); // 更新分页信息 updatePaginationInfo(); // 加载数据 return loadData(currentPage); } else { throw new Error(response.message || "获取产品总数失败"); } }) .catch(function(error) { $("#dataContent").html('<div class="error"><i class="fas fa-exclamation-circle"></i> 获取产品总数时发生错误: ' + error + '</div>'); }); } // 加载数据 function loadData(page) { // 如果正在加载中，则跳过 if (isLoading) return; // 检查缓存中是否已有数据 var cacheKey = getCacheKey(); if (dataCache[cacheKey] && dataCache[cacheKey][page]) { renderData(dataCache[cacheKey][page]); return; } // 显示加载中提示 $("#dataContent").html('<div class="loading"><i class="fas fa-spinner fa-spin"></i> 加载中，请稍候...</div>'); isLoading = true; // 获取产品数据 getProducts(page, itemsPerPage) .then(function(response) { if (response.success) { // 缓存数据 if (!dataCache[cacheKey]) { dataCache[cacheKey] = {}; } dataCache[cacheKey][page] = response.data; // 渲染数据 renderData(response.data); // 更新分页信息 updatePaginationInfo(); } else { throw new Error(response.message || "加载数据失败"); } }) .catch(function(error) { $("#dataContent").html('<div class="error"><i class="fas fa-exclamation-circle"></i> 加载数据时发生错误: ' + error + '</div>'); }) .finally(function() { isLoading = false; }); } // 获取缓存键 function getCacheKey() { return [ searchKeyword, categoryFilter, priceRangeFilter, sortFilter, itemsPerPage ].join('|'); } // 渲染数据 function renderData(data) { var content = $("#dataContent"); content.empty(); if (data && data.length > 0) { var containerClass = viewMode === 'grid' ? 'product-grid' : 'product-list'; var container = $('<div class="' + containerClass + '"></div>'); $.each(data, function(index, product) { var productItem = $('<div class="product-item" data-id="' + product.id + '"></div>'); var productImage = $('<img class="product-image" src="' + product.image + '" alt="' + product.title + '">'); var productInfo = $('<div class="product-info"></div>'); var productTitle = $('<div class="product-title">' + product.title + '</div>'); var productDescription = $('<div class="product-description">' + product.description + '</div>'); var productMeta = $('<div class="product-meta"></div>'); var productPrice = $('<div class="product-price">￥' + product.price.toFixed(2) + '</div>'); var productCategory = $('<div class="product-category">' + product.categoryName + '</div>'); productMeta.append(productPrice, productCategory); productInfo.append(productTitle, productDescription, productMeta); productItem.append(productImage, productInfo); container.append(productItem); }); content.append(container); } else { content.html('<div class="no-data"><i class="fas fa-inbox"></i> 暂无产品数据</div>'); } } // 更新分页信息 function updatePaginationInfo() { // 计算当前页的数据范围 var startItem = (currentPage - 1) * itemsPerPage + 1; var endItem = Math.min(currentPage * itemsPerPage, totalItems); // 更新显示信息 $("#dataCount").text('显示 ' + totalItems + ' 条产品'); $("#paginationInfo").text('显示第 ' + startItem + ' 到 ' + endItem + ' 条，共 ' + totalItems + ' 条'); // 更新跳转页输入框的最大值和当前值 $("#jumpPageInput").attr("max", totalPages); $("#jumpPageInput").val(currentPage); } // 清除缓存 function clearCache() { dataCache = {}; } // 搜索按钮点击事件 $("#searchBtn").click(function() { // 获取搜索关键词 searchKeyword = $("#searchInput").val().trim(); // 重置当前页码 currentPage = 1; // 清除缓存 clearCache(); // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 搜索框回车事件 $("#searchInput").keypress(function(e) { if (e.which === 13) { // 回车键 $("#searchBtn").click(); } }); // 分类筛选改变事件 $("#categoryFilter").change(function() { // 获取选择的分类 categoryFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 清除缓存 clearCache(); // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 价格范围筛选改变事件 $("#priceRangeFilter").change(function() { // 获取选择的价格范围 priceRangeFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 清除缓存 clearCache(); // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 排序方式改变事件 $("#sortFilter").change(function() { // 获取选择的排序方式 sortFilter = $(this).val(); // 重置当前页码 currentPage = 1; // 清除缓存 clearCache(); // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 跳转到指定页 $("#jumpPageBtn").click(function() { var jumpPage = parseInt($("#jumpPageInput").val()); // 验证输入 if (isNaN(jumpPage) || jumpPage < 1 || jumpPage > totalPages) { alert("请输入有效的页码（1-" + totalPages + "）"); return; } // 更新当前页码 currentPage = jumpPage; // 加载数据 loadData(currentPage); // 更新分页组件 $("#paginationContainer").pagination("setCurrentPage", currentPage); }); // 每页显示条数改变 $("#pageSizeSelect").change(function() { // 获取新的每页显示条数 var newItemsPerPage = parseInt($(this).val()); // 更新每页显示条数 itemsPerPage = newItemsPerPage; // 重置当前页码 currentPage = 1; // 清除缓存 clearCache(); // 销毁旧的分页组件 $("#paginationContainer").empty(); // 重新初始化分页组件 initPagination(); }); // 视图模式切换 $(".view-option").click(function() { // 获取选择的视图模式 var newViewMode = $(this).data("view"); // 如果已经是当前模式，则不处理 if (newViewMode === viewMode) return; // 更新视图模式 viewMode = newViewMode; // 更新按钮状态 $(".view-option").removeClass("active"); $(this).addClass("active"); // 重新渲染数据 var cacheKey = getCacheKey(); if (dataCache[cacheKey] && dataCache[cacheKey][currentPage]) { renderData(dataCache[cacheKey][currentPage]); } }); // 页面加载完成后初始化 $(document).ready(function() { initPagination(); }); </script> </body> </html>