- 浏览: 132804 次
- 性别:
- 来自: 安徽
文章分类
先看下效果图:
这是第一次写博文,是关于学习jQuery完成的一个实例,希望大家不吝赐教。
以下是代码片段,完整的demo详见附件! 望和大家一起学习进步。谢谢!
这是第一次写博文,是关于学习jQuery完成的一个实例,希望大家不吝赐教。
以下是代码片段,完整的demo详见附件! 望和大家一起学习进步。谢谢!
/** * @described 分页组件 * @author xuxb * @see 通过jquery完成页面数据的分页工具栏 pagetoolbar * @see 用于缓解页面数据量过大而导致页面停顿或假死现象 * @mark 定义的局部变量为私有变量 提供对应的方法进行操作, 如 this.totalSize = totalSize; 将破坏对象的封装 * @created 2011-05-30 */ var pageInfo = null; // 全局分页信息 var PAGE_SIZE = 10; // 每页显示多少条 function turnPage(pageNo) { // 翻页操作 pageInfo.currentPage = pageNo; pageInfo.show(); } function PageComponent(totalSize, pageSize, currentPage) { this.totalSize = totalSize; this.pageSize = pageSize; this.currentPage = currentPage; this.toolbarSize = 7; // 默认的页码个数 (奇数可以保持页码对称) this.step = 3; // 当前页码的前、后页码数(步长) if (PageComponent._init==undefined) { // 调用初始化方法 -- this.init(); PageComponent._init = 1; } } PageComponent.prototype.init = function() { // 完成一些初始化动作init // $("#tipPage").text(this.getTipPage()); }; PageComponent.prototype.getStartIndex = function() { // 获取开始索引值 if (this.currentPage == 1) return 0; else return (this.currentPage - 1) * this.pageSize; }; PageComponent.prototype.getEndIndex = function() { // 获取结束索引值 if (this.currentPage == 1) return this.pageSize; else if (this.currentPage * this.pageSize >= this.totalSize) { return this.totalSize; } else { return this.currentPage * this.pageSize; } }; PageComponent.prototype.getPageCount = function() { // 获取总页数 return Math.ceil(this.totalSize / this.pageSize); }; PageComponent.prototype.getUpPage = function() { // 获取上一页 页码 if (this.currentPage - 1 < 1) return 1; return this.currentPage - 1; }; PageComponent.prototype.getDownPage = function() { // 获取下一页 页码 if (this.currentPage >= this.getPageCount()) return this.getPageCount(); return this.currentPage + 1; }; PageComponent.prototype.getFirstPage = function() { // 获取下一页 页码 return 1; }; PageComponent.prototype.getTipPage = function() { // 获取提示信息 return "第" + this.currentPage + "页/共" + this.getPageCount() + "页 共有结果" + this.totalSize + "条"; }; PageComponent.prototype.computePage = function() { $("#toolbar").hide(); // $("#tipPage").text(this.getTipPage()); // $("#firstPage").val(this.getFirstPage()); // alert($("#upPage").val()); // $("#upPage").val(this.getUpPage()); // $("#downPage").val(this.getDownPage()); // $("#endPage").val(this.getPageCount()); $("#tipPage").html(this.getTipPage()); $("#toolbar").show(); }; PageComponent.prototype.pageToolbar = function() {//公式 /* * 重新理思路 * 1. 根据当前页码生成待生成的JSON格式页码 如{"< Prev":"1","2":"2",....,"Next >":"2"} * 2. 可分为2种情况实现 */ var jsonArray = new Array(); var items = ""; jsonArray.push('"< Prev ":"'+this.getUpPage()+'"'); // 上一页 jsonArray.push('"'+this.getFirstPage()+'":"'+this.getFirstPage()+'"'); // 首页 if (this.getPageCount() <= this.toolbarSize) {// 情况一:需要生成的页码小于或等于默认值 for (var i = 1; i <= this.getPageCount(); i++) { if (this.currentPage<=this.yardage*2) { jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2" } } } else { // 情况二:需要生成的页码大于默认值 var start = parseInt(this.currentPage)-parseInt(this.step); // 3 var end = parseInt(this.currentPage)+parseInt(this.step); if (start<this.step) { // 起始值小于step start=2; end=start+2*this.step-1; }else if (end>this.getPageCount()) { // 结束值大于总页数 end=this.getPageCount(); start=end-2*this.step; } for (var i=start; i<=end; i++) { if(i==start&&start>=this.step) { // first... jsonArray.push('"first...":"..."'); } jsonArray.push('"'+i+'":"'+i+'"'); // 格式如下 "2":"2" if (i==end&&end<this.getPageCount()-1) { // after... jsonArray.push('"after...":"..."'); } } } jsonArray.push('"'+this.getPageCount()+'":"'+this.getPageCount()+'"'); // 末页 jsonArray.push('" Next >":"'+this.getDownPage()+'"');// 下一页 jsonArray = "{" + jsonArray.join(",") + "}"; jsonArray = $.parseJSON(jsonArray); var temp = this.currentPage; // 保存当前页码值 // var regx = /^\d+$/; $.each(jsonArray, function(i, n) { if (!isNaN(n)) { items += "<li"; if (temp==n&&i==n) { // 当前页和当前待生成的页码一样, 并且生成页码的key和value相等。 items += " class='currentpage'"; } else if (temp==n&&i!=n) { // 1.若当前页没有上一页,上一页按钮css为dispage // 2.若当前页没有下一页,下一页按钮css为dispage items += " class='dispage'"; } else { items += " onclick='javascript:turnPage("+n+");'"; } items += "> "+i+" </li>" } else { items += n; // ... 省略号 } }); $("#ulpage").empty(); $("#ulpage").append(items); }; PageComponent.prototype.addClass = function(className) { // 鼠标悬停切换样式 $(".ulpage li").bind("mouseover mouseout", function() { $(this).toggleClass(className); }); }; PageComponent.prototype.show = function(pageNo) { if (pageNo!=null&&pageNo!="") { // 可以接收参数,当前页码 this.currentPage = pageNo; } /* * 前置条件: * 1.当前页码大于0 * 2.总记录数大于0 * 3.当前页码必须小于总页码 */ if (this.currentPage > 0 && this.totalSize > 0 && this.currentPage <= this.getPageCount()) { this.computePage(); this.pageToolbar(); this.addClass("ulpageunderline"); // 样式ulpageunderline var hidepart = $("#table2 tr:not(.list_table_tr)"); // 隐藏部分CSS的id选择器 hidepart.hide(); for (i = this.getStartIndex(); i < this.getEndIndex(); i++) { hidepart.eq(i).show(); } } };
- PageToolbar.zip (42.1 KB)
- 下载次数: 43
发表评论
-
jquery 限制文本框只能输入数字
2012-09-19 11:22 1274原文引自:http://lvhjean.blog.163.co ... -
jQuery Datepicker 日期选择插件
2011-07-04 17:21 3921在Web开发中,总会遇到 ... -
jQuery性能优化
2011-07-01 13:33 1053本文摘自:开源中国社 ... -
Center an element on the screen
2011-06-23 17:22 713$(document).ready(function() { ... -
分享9个实用的jQuery倒计时插件
2011-05-23 13:05 1045jQuery在现在的Web开发项目中扮演着重要角色,jQu ... -
jquery获取父窗口的元素
2011-05-19 13:18 2429$("#父窗口元素ID",window ... -
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2011-05-18 18:05 1561因为浏览器的兼容问题,如果使用javascript获取这些数值 ... -
流行的jQuery信息提示插件(jQuery Tooltip Plugin)
2011-05-18 13:10 1358流行的jQuery信息提示插件(jQuery Toolti ... -
JQuery 浮动DIV显示提示信息并自动隐藏
2011-05-18 13:09 2456function showTips( tips, height ... -
jQuery技巧
2011-05-07 09:17 7901、关于页面元素的引用 通过jquery的$()引用元素包括通 ... -
$的选择器部分
2011-05-07 09:10 722凡是运用$,其返回值是 ... -
JQuery--clientX, clientY,offsetX, offsetY的区别
2011-05-06 12:23 1711Html中定位是非常重要的,否则再好的东西不能在它应该在的地方 ... -
无刷新分页 jquery.pagination.js
2011-05-06 12:04 1770插件参数列表 2.页面内容: <%@ Page ... -
Jquery UI dialog 详解
2011-05-06 11:57 13241 属性 1.11 autoOpen ,这个属性为true的 ... -
jQuery获取text,areatext,radio,checkbox,select值
2011-05-06 11:49 913jquery radio取值,checkbox取值,selec ...
相关推荐
同时,你需要设计一个分页导航栏,通常包含“首页”、“上一页”、“下一页”、“末页”等按钮以及当前页数和总页数的显示。 Jquery的$.ajax方法是进行Ajax请求的关键。你可以设置URL指向服务器端处理分页请求的...
标题中的“ssh”通常指的是Java开发中的三个框架——Spring、Struts和Hibernate的组合,而“jQuery分页”则是指在前端使用jQuery库实现数据分页功能。在Web开发中,SSH框架常用于构建后端逻辑,而jQuery则用于增强...
首先,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery动态表格数据分页插件就是基于jQuery构建的,利用其强大的功能来处理表格数据的分页逻辑。 在网页设计...
jQuery Mobile 是一个流行的前端框架,用于构建响应式和触控友好的移动 web 应用程序。在处理大量数据时,分页是必不可少的功能,它帮助用户更有效地浏览内容,而不是一次性加载所有信息。"jQuery Mobile 分页显示...
标题中的“用JQuery做的一个分页效果”指的是使用JavaScript库JQuery实现的网页分页功能。在网页中,特别是数据量较大的时候,为了提高用户体验和加载速度,通常会采用分页显示数据,而不是一次性加载所有内容。...
分页组件是jQuery EasyUI中的一个重要组成部分,用于显示大量的数据。它提供了一种交互式的界面,允许用户按需加载和切换数据页面,提高了网页的响应速度和用户体验。 3. **分页配置** 要实现jQuery EasyUI的分页...
标题“jQuery+PHP实现FCKEditor内容分页”涉及到的是在网页内容编辑中,如何利用jQuery、PHP以及FCKEditor工具来实现文章或文本的分页功能。FCKEditor是一款强大的富文本编辑器,常用于网站后台内容管理,允许用户在...
总的来说,"jQuery基于Bootstrap分页插件.zip" 提供了一个高效且易于使用的工具,使得在Bootstrap项目中实现分页功能变得简单。配合"说明.htm" 和 "jiaoben5709" 文件,开发者可以快速上手并定制自己的分页组件,...
文件`yckart-jquery.pager.js-68fd201`表明这是`jquery.pager.js`的一个特定版本,版本号`68fd201`可能是Git仓库中的一个提交ID,意味着此版本可能包含了一些特定的修复或改进。在实际使用中,开发者需要根据项目的...
Bootstrap分页插件是一种广泛使用的工具,它通常依赖于Bootstrap框架和jQuery库来实现美观且响应式的分页效果。然而,有些情况下,开发者可能希望创建一个不依赖于这些外部库的分页插件,以减少页面加载时间或避免库...
首先,jQuery分页插件如`jquery.page`和`jquery.simplePagination`是用于在网页中实现分页功能的工具。它们通过简单的API调用和配置选项,使得开发者能够快速地在网页上添加分页功能,无需编写大量的自定义代码。这...
总之,jQuery分页控件是网页开发中不可或缺的工具之一,它简化了分页逻辑的实现,让网页在处理大量数据时依然保持流畅、高效的用户体验。开发者可以根据自身项目的需求,灵活调整和定制这个控件,以达到最佳的效果。
jQuery EasyUI DataGrid 是一个基于 jQuery 和 EasyUI 框架的数据展示组件,它提供了丰富的功能,包括数据的加载、排序、筛选以及我们关注的分页功能。在本篇文章中,我们将深入探讨如何在实际应用中实现 jQuery ...
5. 分页导航:创建一个分页导航栏,包含“上一页”、“下一页”和页码选择器。用户点击时,更新分页参数并重新发起请求,加载对应页的数据。 6. 动态加载与懒加载:为了进一步提升性能,可以采用动态加载或懒加载...
下面是一个使用JQuery EasyUI实现增删改查的基本步骤: 1. **数据绑定**:首先,你需要将从服务器获取的JSON数据绑定到`datagrid`中。这可以通过设置`url`属性来实现,EasyUI会自动发送Ajax请求获取数据。 ```...
本文将深入探讨如何使用jQuery实现一个高效的表单搜索功能,将其转化为一个实用的工具,帮助用户快速找到含有特定关键词的信息。 首先,我们要理解jQuery的核心理念:它提供了一种简洁的API,使得开发者能用更少的...
jQuery作为一个强大的JavaScript库,提供了丰富的插件来实现分页功能,其中之一就是“jQuery分页控件”或称“pagination”。这个控件能够帮助开发者轻松创建美观、实用的分页界面。 **一、jQuery分页插件基础概念**...
此“类似播放器jQuery分页插件”可能是一个用于实现网页内容分页显示的工具,其设计灵感可能来源于音乐播放器或视频播放器的界面样式,提供一种视觉上独特且用户友好的体验。 首先,我们要理解jQuery分页插件的基本...