Jquery + Js 实现分页

网上有很多分页的插件

但是没有自己想要的

上代码吧,只有分页部分代码,css 省略了

html

 1 <div class="bar2 fr" id="pagecontrol">
 2                                 <ul>
 3                                     <li><span id="prepage">上一页</span></li>
 4                                     <li class="num current"><a>1</a></li>
 5                                     <li class="num"><a>2</a></li>
 6                                     <li class="num"><a>3</a></li>
 7                                     <li class="num"><a>4</a></li>
 8                                     <li class="num"><a>5</a></li>
 9                                     <li><span id="nextpage">下一页<span></li>
10                                 </ul>
11                             </div>

js

 1 $(function(){
 2         var curpage=1;//当前页码
 3         var maxpage = 10;//最大页码
 4
 5         if(maxpage > 1)
 6             $("#nextpage").addClass("active");
 7
 8         $("#rowsToshow").change(function(){
 9             console.log($("#rowsToshow").val());
10         })
11         $("#prepage").live("click",function(){
12             curpage = curpage - 1;
13             pageshow(curpage,maxpage);
14         })
15         $("#nextpage").live("click",function(){
16             curpage = curpage + 1;
17             pageshow(curpage,maxpage);
18         })
19         $("#pagecontrol li a").live("click",function(){
20             curpage = Number($(this).text());
21             pageshow(curpage,maxpage);
22         })
23     })
24
25     function pageshow(cp,tp){
26
27         var sp = cp - 2;//startpage
28         var ep = cp + 2;//endpage
29         var eoff = ep - tp;//tp:totalpage
30         if(eoff>0){
31                 sp = sp - eoff;
32         }
33         if(sp<=0){
34             ep = ep -sp + 1;
35         }
36         var str = ‘‘;

37         if(cp != 1)
38             str = str + ‘<ul><li><span id="prepage" class="active">上一页</span></li>‘
39         else
40             str = str + ‘<ul><li><span id="prepage">上一页</span></li>‘
41         for(var i= sp;i<=ep;i++){
42             if(i>0&& i<=tp){
43                 if(i == cp)
44                     str = str + ‘<li class="num current"><a>‘+i+‘</a></li>‘;
45                 else
46                     str = str + ‘<li class="num"><a>‘+i+‘</a></li>‘;
47             }
48         }
49
50         if(cp != tp)
51             str = str + ‘<li><span class="active" id="nextpage">下一页<span></li></ul>‘;
52         else
53             str = str + ‘<li><span id="nextpage">下一页<span></li></ul>‘;
54         $("#pagecontrol").html(str);
55     }

效果图

时间: 2024-10-22 20:10:47

Jquery + Js 实现分页的相关文章

锋利的js前端分页之jQuery

原文:锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 1 /** 2 * pageSize, 每页显示数 3 * pageIndex, 当前页数 4 * pageCount 总页数 5 * url 连接地址 6 * pager(10, 1, 5, 'Index')使用方法示例 7 */ 8 function pager(pageSize

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

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

单篇文章JS模拟分页

废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求.所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1).这里就不讨论具体的技术细节了和上一篇的分页计算原理

jquery+NHibernate的分页效果

目录结构 先设计数据表结构 DROP SEQUENCE BDLLY_2V.SEQ_CUSTOMER; CREATE SEQUENCE BDLLY_2V.SEQ_CUSTOMER START WITH 6 MAXVALUE 999999999999999999999999999 MINVALUE 0 NOCYCLE NOCACHE NOORDER; DROP TABLE BDLLY_2V.CUSTOMER CASCADE CONSTRAINTS; CREATE TABLE Customer ( C

jQuery、Ajax分页

1.效果图预览 2.HTML代码 <div class="row"> <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"> <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable"> <

jQuery ajax 实现分页 kkpager插件

代码片段一: <!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/javascript" src="/resour

浅谈jQuery Pagination Ajax 分页插件的使用

插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件使用 此插件使用比较简单.主要引入以下文件就可以用了 1.jquery.js依赖库 2.pagination.css 这个主要是样式,我们在元素使用的时候将分页列表放在class类为pagination的标签内即可 <div class='pagination'></div> 3.jq

PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )

/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 ******* 其它组件:jQuery-1.8.3.min.js + Smarty 3.1.18 + TinyMCE 4.1.6 ******* Date:2014-10-20 ******* Author:小dee ******* Blog:http://www.cnblogs.com/dee0912/*

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,特此记录下来.如有不足之处,欢迎指出. 本插件可以实现的功能: 1. 可初始化每页条数,以及重新选择每页条数 2.自定义首末页.上下页按钮的显示内容(是:<<.  >>.  < .  >    还是:首页.末页.上一页.下一页) 3.设置当前页在一定范围时,是否显示省略号按钮 4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个