一个比较轻巧好用的js分页插件,可ajax可url

var pageNav = pageNav || {};
pageNav.fn = null;
pageNav.pre = "pre";
pageNav.next = "next";
pageNav.nav = function (a, b) {
    if (1 >= b)return this.pn = this.p = 1, this.pHtml2(1);
    b < a && (a = b);
    var c = "";
    1 >= a ? a = 1 : (c += this.pHtml(a - 1, b, pageNav.pre), c += this.pHtml(1, b, "1"));
    this.p = a;
    this.pn = b;
    var d = 2, e = 9 > b ? b : 9;
    7 <= a && (c += "...", d = a - 4, e = a + 4, e = b < e ? b : e);
    for (; d < a; d++)c += this.pHtml(d, b);
    c += this.pHtml2(a);
    for (d = a + 1; d <= e; d++)c += this.pHtml(d, b);
    e < b && (c = c + "..." + this.pHtml(b, b));
    a < b && (c += this.pHtml(a + 1, b, pageNav.next));
    return c
};
pageNav.pHtml = function (a, b, c) {
    return" <a href=‘javascript:pageNav.go(" + a + "," + b + ");‘ class=‘pageNum‘>" + (c || a) + "</a> "
};
pageNav.pHtml2 = function (a) {
    return" <span class=‘cPageNum‘>" + a + "</span> "
};
pageNav.go = function (a, b) {
    document.getElementById("pageNav").innerHTML = this.nav(a, b);
    null != this.fn && this.fn(this.p, this.pn)
};
/*
 <style>
 .pageNum{border: 1px solid #999;padding:2px 8px;display: inline-block;}
 .cPageNum{font-weight: bold;padding:2px 5px;}
 #pageNav a:hover{text-decoration:none;background: #fff4d8; }
 </style>
 * //$(function(){ //for jquery
 window.onload = (function(){

 //optional set
 pageNav.pre="PRE3";
 pageNav.next="NEXT";

 //  p:current page number.
 //  pn: page sum.
 pageNav.fn = function(p,pn){
 document.getElementById("test").innerHTML ="Page:"+p+" of "+pn + " pages.";
 //$("#test").text("Page:"+p+" of "+pn + " pages."); //for jquery
 };

 //goto the page 3 of 33.
 pageNav.go(3,53);

 });*/

官方地址:https://code.google.com/p/page-nav-js-jquery/  

时间: 2024-11-01 02:12:46

一个比较轻巧好用的js分页插件,可ajax可url的相关文章

局部刷新的js分页插件

补上写好的js分页插件.水平有限,可供参考.另外有好建议的可以在评论里面提出,我再做优化.废话不多说了,代码走起! (一)splitPage.js分页插件 直接copy就能使用: /*** * 功能:局部刷新分页显示表格内容 * 作者:JML * 版本:1.0 * 备注:自己封装的局部刷新分页插件,主要是想了解一下分页插件是如何运作的 * 缺陷:水平有限,插件很不灵活,还有两个硬编码块 * 建议:大家还是下载专门的js分页插件来进行使用吧(本代码可供参考) */ /** * 帮助文档: * 1.

Jquery.Page.js 分页插件的使用

1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" /> <script src="~/Scripts/jQuery-1.8.3.js"></script> <script src="~/Scripts/Page/jquery.pager.js"></script>

js分页插件

//分页插件 function showView(option) {        //参数定义id,页容量,当前页,总数,页总数        var id = option.id,         pageSize = option.pageSize,         currentPage = option.currentPage,         totalCount = option.totalCount,         pageCount = 0;        if (Numbe

JS分页插件-GCPager

1 //IE8及以下引入json2.js,IE8不支持JSON.stringify()方法,基于JQuery,使用前先引入1.x版本的JQuery 2 //服务端返回的格式为{"recordCount":333,"data":.......} 3 $.extend( 4 { 5 GcPager: function (options) { 6 if (!options) return; 7 var ContainerId = options.ContainerId;/

kkpager.js 分页插件

<script src="/static/js/lib/jquery-pages/kkpager.min.js"></script> <script> $(function () { /*分页*/ paging(); }); function paging() { var totalPage = 20; var totalRecords = 12; var pageNo = getParameter('page'); if (!pageNo) { p

jquery.pagination.js分页插件的使用

1.引用jquery.pagination.js <script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script> 2.发送2次ajax请求,第一次需传入首页和页大小,返回数据得到所有数据的长度: 第二次发送请求传入点击的页码号和页的大小,返回数据得到点击页的数据 参考链接: 1.https://blog.csdn.net/baidu_25343343/art

MVC如何使用开源分页插件shenniu.pager.js

最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只能ip访问,没有域名哈哈),其架构组成由:aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务,这个项目在后期会开源出来供大家分享学习,站点地址点这里心声网:一者是目前正在做的后台管理框架一叶子,现目前刚好吧js分页插件shenniu.pager.js写

触屏版轻量级分页插件jqPagination分享

说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多. 或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空间那种模式,分页过时了.或许,阅读到底部后顺手点一下"下一页"和无需操作自动加载内容继续阅读,这小小的一点会给用户带来很不同的微妙感受. 可以肯定的是,当要展示数据量较大时,一定会用到分页的.一是给用户内容多少的预期,二是可以给浏览者提供一个停顿.如果用户看一篇文章已经翻了十几屏,滚动条还

Bootstrap Paginator 分页插件参数介绍及使用

Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 参数