基于jQuery的分页功能实现

第1步:分析问题  我这边的处理方式是根据传入的数据条数,和需要显示的页码数,自动生成页码。举个例子,如果传入的参数为{pageSize:10,totalRow:200}  那么就一共有20页。

首次生成的页码样式截图:

第2步:点击操作 点击 2 或者下一页按钮的样式截图:

第3步:生成新页面 这里可视的页码数是10.代码的处理机制是,以6为median 也就是中间值,刷新页码 点击6的样式截图:

第4步:此时点击6之后的页码,或者下一页按钮,会刷新页面,样式截图:

html 结构

<div id="pagination">
</div>

js 调用 getDataFun为点击之后执行的操作,可以是ajax请求

$("#pagination").paging({pageSize:10,totalRow:200,getDataFun:getData})

缺点是每次刷新页面都需要重写dom。应该是再刷新页面的时候只更改页码数,有时间在优化 - - ,最近写的东西都是会经常用到的一些小功能,新手。有错误请指正  那个在线预览怎么搞啊。是需要自己站点还是博客园有这个功能,,我没有找到

有需要的话 完整代码demo 下载  paging.zip

时间: 2024-08-01 15:40:21

基于jQuery的分页功能实现的相关文章

基于jQuery带备忘录功能的日期选择器

今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <header class="htmleaf-header">

一款基于jQuery的分页插件

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by [email protected] */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @pa

jQuery静态分页功能

分页功能在做项目的过程中是常常用到的,下面是我常用的一款分页效果: 1.分页的CSS样式(page.css) 1 #setpage { 2 margin: 15px auto; 3 text-align: center; 4 } 5 #setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{ 6 border:1px solid #DDD; 7 background:#0d6cbf;

福利到~分享一个基于jquery的分页控件

前台分页控件有很多,以下是我的实现.默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 有2个参数需要注意: beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面.如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理. ca

基于angularJS的分页功能

先看分页效果图 是基于bootstrap的基本分页效果,样式可以先去查看boostrap文档熟悉. 在以angularJS中,像这种公共组件一般(也应该)写到公共directive中,下面可以下项目中怎么实现的. ①. 公共组件 pageDirective.js define(['angular'], function(angular) { //依赖angularJS,这里用到了requireJS,未使用者自行更改 var directives = angular.module("app.dir

HTML 基于 Python 实现分页功能

前面的话: 1. 网页引用的bootstrap 中的表格,所以需要引入样式类 2. 第一次写文章,不喜勿喷.有不足的地方,可留言我改正,在此先谢过. HTML代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>分页</title> <link rel="stylesheet" h

jquery实现分页功能

RT,不是很难,但是感觉代码一点都不简洁, 1 $("#page").on('click','.list',function(){ 2 $(this).addClass("active"); 3 $(this).siblings().removeClass("active"); 4 getStatus(); 5 if(isMore) 6 { 7 switch($(this).attr("id")) 8 { 9 case &qu

【jQuery 分页】jQuery分页功能的实现

自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其中引用bootstrap.css  和bootstrap .js是必须的 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ ta

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),