jquery分页插件

jquery.mypagination.js 文件:



/* *


* jquery分页插件
* 1.0  zheng 2014-03-18 
* 1.1  兼容url包含#号地址,GoToPage可以指定锚点(特殊需求)2014-04-10 09:00:34
* 1.2  可以配置分页条列出页面数
* 1.3  增加了页面码跳转功能
*  $('#mypage').scPagination(555, {
*              pageSize: 10,//每页显示的记录条数
*           myPagerCount:10,//分页条显示的页面个数
*              callback: function (page) {
*                  alert("选择了页码"+page);
*              }
*          });
*/



$.fn.scPagination = function (totalProperty, opts) {
    opts = $.extend({
        pageSize: 10,
myPagerCount:10,
        callback: function () {
        }
    }, opts || {});
    return this.each(function () {
        function numPages() {
            return Math.ceil(totalProperty / opts.pageSize);
        }




        function selectPage(page) {
            return function () {
                currPage = page;
                if (page < 1) currPage = 1;
                if (page >= numPages()) currPage = numPages();
                render();
                opts.callback(currPage);
            }
        }


        function render() {
            var html = '<div class="Page">'
 + '<div>[共<span class="Total">' + totalProperty + '</span>条]</div>'
 + '<a id="page-first" href="javascript:void(0);">首页</a>'
 + '<a id="page-prev" href="javascript:void(0);">上页</a>';
var fistPage=1;
var lastPage=numPages();
if(currPage>Math.ceil((opts.myPagerCount-1)/2))
{
fistPage=currPage-Math.ceil((opts.myPagerCount-1)/2);
}
if(fistPage>numPages()-opts.myPagerCount+1)
{
fistPage=numPages()-opts.myPagerCount+1;
}
if(fistPage<1)fistPage=1;
lastPage=opts.myPagerCount+fistPage-1;
if(lastPage>numPages())lastPage=numPages();


            for (i = fistPage; i <= lastPage; i++) {
                //if (currPage + i <= numPages() && currPage + i > 0) {
                    html += '<a href="javascript:void(0);" class="NumPage">' + i + '</a>';
               // }
            }


            html += '<a id="page-next" href="javascript:void(0);">下页</a>'
                 + '<a  id="page-last" href="javascript:void(0);">尾页</a>'
+ '<input id="txtGoTo" class="page-num"/><a id="btnGoTo" href="javascript:void(0);">GO</a>'
                 + '</div>';


            if (currPage > 0) {


            }
            if (currPage < numPages()) {


            }
            panel.empty();
            panel.append(html);
            $('#page-first', panel)
                .bind('click', selectPage(1));
            $('#page-prev', panel)
                .bind('click', selectPage(currPage - 1));
            $('#page-next', panel)
                .bind('click', selectPage(currPage + 1));
            $('#page-last', panel)
                .bind('click', selectPage(numPages())); 

            $('.NumPage').each(function () {
                $(this).bind('click', selectPage(parseInt($(this).text())));
                if (parseInt($(this).text()) == (currPage)) {


                    $(this).attr('class', 'Selected');
                }
            });







            $('input.page-num', panel)
                .val(currPage)
                .change(function () {
                    selectPage($(this).val())();
                });


$('#btnGoTo',panel)
.bind('click', 
function()
{
var goPage=parseInt($('#txtGoTo').val());
selectPage(goPage)();
}
); 






            if (request("pageIndex") != "") {
                $('.Selected').each(function () {


                    $(this).attr('class', 'NumPage');


                });
                $('.NumPage').each(function () {
                    if (parseInt($(this).text()) == parseInt(request("pageIndex"))) {
                        $(this).attr('class', 'Selected');
                    }
                });
            }
        }
        var currPage = 1;
        if (request("pageIndex") != "") {
            currPage = parseInt(request("pageIndex"));
        }
        var panel = $(this);
        render();


        function request(paras) {
            var url = location.href;
            var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
            var paraObj = {}
            for (i = 0; j = paraString[i]; i++) {
                paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
            }
            var returnValue = paraObj[paras.toLowerCase()];
            if (typeof (returnValue) == "undefined") {
                return "";
            } else {
                return returnValue;
            }
        }


    });
}




//获取url参数 request("ID")
function request(paras) {
    var url = location.href;
    var splitChar = /[&#]/;//设置分隔字符
    var paraString = url.substring(url.indexOf('?') + 1, url.length).split(splitChar);
    var paraObj = {}
    for (i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "";
    } else {
        return returnValue;
    }
}


function GoToPage(page, anchor) {


    var oUrl = this.location.href.toString();
    if (anchor && oUrl.indexOf("#" + anchor) > 0) {
        oUrl=oUrl.replace("#" + anchor, "");
    }
    var re = eval('/(pageIndex=)([^&|#]*)/gi');
    var nUrl = oUrl.replace(re, 'pageIndex=' + page);
    if (request("pageIndex") == "") {
        if (oUrl.indexOf("?") <= 0) {
            nUrl = nUrl + "?pageIndex=" + page;
        }
        else {
            nUrl = nUrl + "&pageIndex=" + page;
        }
    }
    if (anchor && oUrl.indexOf("#" + anchor) < 0) {//链接到锚点
        anchor = anchor.replace('#', '');
        nUrl = nUrl + "#" + anchor;
    }
    this.location = nUrl;
}




function replaceParamVal(paramName, replaceWith) {
    var oUrl = this.location.href.toString();
    var re = eval('/(' + paramName + '=)([^&|#]*)/gi');
    var nUrl = oUrl.replace(re, paramName + '=' + replaceWith);
    this.location = nUrl;
}




/***用到的样式 为了方便直接写在了此处**/
document.write(" <style type=\"text/css\">");
document.write("/*分页开始*/");
document.write(".Page");
document.write("{");
document.write(" height: 26px;");
document.write("}");


document.write(" .Page div");
document.write(" {");
document.write(" display: inline-block;");
document.write(" zoom: 1;");
document.write(" font-size: 14px;");
document.write(" }");


document.write(" .Page .Total");
document.write(" {");
document.write(" color: #cc0000;");
document.write(" }");


document.write(" .Page a");
document.write(" {");
document.write(" padding: 4px 5px;");
document.write(" height: 14px;");
document.write(" line-height: 14px;");
document.write(" font-size: 14px;");
document.write(" border: 1px solid #d5d5d5;");
document.write(" margin: 0px 5px;");
document.write(" display: inline-block;");
document.write(" }");


document.write(" .Page a:hover");
document.write(" {");
document.write(" text-decoration: underline;");
document.write(" border-color: #cc0000;");
document.write(" }");


document.write(" .Page .Selected");
document.write(" {");
document.write(" background: #cc0000;");
document.write(" border-color: #cc0000;");
document.write(" color: #ffffff;");
document.write(" display: inline-block;");
document.write(" zoom: 1;");
document.write(" }");
document.write(" .Page input");
document.write(" {");
document.write(" width:40px;");
document.write(" overflow-x:visible;");
document.write(" padding: 4px 5px;");
document.write(" height: 14px;");
document.write(" line-height: 14px;");
document.write(" font-size: 14px;");
document.write(" border: 1px solid #d5d5d5;");
document.write(" margin: -3px 0px 0px 5px;");
document.write(" display: inline-block;");
document.write(" }");
document.write("/*分页结束*/");

document.write(" </style>");




test.html 测试文件:


<head>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
    <script type="text/javascript" src="jquery.mypagination.js"></script>  
</head>  

 <div id="mypage" class="Pagination" style="margin-bottom: 0px;"></div>
 <script>  
        $(document).ready(function(){  
            $('#mypage').scPagination(555,{
pageSize:20,
myPagerCount:10,
                callback:function(page){  
                    alert(page);  
                }  
            });  
        });  
 </script>  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286853.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android之如何分析手机系统相册图片和视频删除后保存的位置

1 需求 需要获取各种型号手机系统相册图片和视频删除后保存的位置 2 分析 1)我们可以通过在sdcard目录下进行相关查找文件夹关键字,对 "cycle"或者"trash"或者*galle*进行忽略大小写模糊查询都有文件夹 find . -iname *cycle* find . -iname *trash*…

WPF 实现水珠效果按钮组

本文经原作者授权以原创方式二次分享&#xff0c;欢迎转载、分享。原文作者&#xff1a;普通的地球人原文地址&#xff1a;https://www.cnblogs.com/tsliwei/p/8041928.html相关知识这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看贝…

GetDisplayName 获取枚举的显示值

item.State.GetDisplayName(), 转载于:https://www.cnblogs.com/zhongku/p/4944315.html

组策略管理——软件限制策略(4)

编写软件限制规则 在前面几篇文章中讲了软件限制规则的基本概念&#xff0c;现在就来学习如何编写自定义软件限制策略。 编写规则应遵循的原则 首先&#xff0c;需要大家注意的是&#xff0c;软件限制策略应本着方便、安全、实用的原则来编写。限制规则灵活方便&#xff0c;自定…

我使用 html 反向输出自己打自己(7)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…

甘肃省普通高等学校高职(专科)升本科考试英语科考试大纲(试行)

甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试英语科考试大纲&#xff08;试行&#xff09; 一、考试目的 全面考核普通高等学校高职&#xff08;专科&#xff09;应届毕业生英语课程是否达到教学大纲所规定的目标&#xff08;领会式掌握3500单词&#xff0c…

256种编程语言大荟萃

本文是码农网原创翻译&#xff0c;转载请看清文末的转载要求&#xff0c;谢谢合作&#xff01; 双休日常常意味着很多休息时间。与其懒洋洋地坐在那里玩游戏&#xff0c;为何不学点新知识武装自己&#xff1f;本文中不会特定推荐哪种编程语言&#xff0c;但是会提供基于GitHub上…

java 获取系统当前时间

Calendar ca Calendar.getInstance(); int year ca.get(Calendar.YEAR);//获取年份 int monthca.get(Calendar.MONTH);//获取月份 int dayca.get(Calendar.DATE);//获取日 int minuteca.get(Calendar.MINUTE);//分 int hourca.get(Calendar.HOUR)…

Android之最简单的遍历某个目录下的所有文件(递归)

1、问题 遍历某个目录下的所有问题文件 2、代码实现 fun getRecoverTrashFile(path: String) {if (TextUtils.isEmpty(path))returntry {var file File(path)if (file null || !file.exists()) {return}var files file.listFiles()if (files null || files.size < 0) {…

Castle.DynamicProxy拦截器

在asp.net mvc或asp.net miniapi中&#xff0c;有过滤器&#xff0c;可以在请求前或后增加一层&#xff0c;达到验证&#xff0c;过滤等作用&#xff0c;如果在Service的方法前后加一层呢&#xff1f;这里介绍一下Castle.DynamicProxy的用法。首先引入Castle.Core实现代码相对轻…

甘肃省普通高等学校高职(专科)升本科考试计算机科考试大纲(试行)

甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试计算机科考试大纲&#xff08;试行&#xff09; 一、考试目的及要求 全面考核普通高等学校高职&#xff08;专科&#xff09;应届毕业生计算机应用能力是否达到教学大纲所规定的要求。所有考生计算机基础知识必须…

Android选项切换条SHSegmentControl

&#xfeff;&#xfeff;Android选项切换条SHSegmentControl SHSegmentControl是github上一个开源的选项切换条&#xff0c;其样式如图所示&#xff1a; SHSegmentControl在github上的项目主页地址&#xff1a;https://github.com/7heaven/SHSegmentControl SHSegmentControl…

从零开始编写自己的C#框架(14)——T4模板在逻辑层中的应用(三)

原本关于T4模板原想分5个章节详细解说的&#xff0c;不过因为最近比较忙&#xff0c;也不想将整个系列时间拉得太长&#xff0c;所以就将它们整合在一块了&#xff0c;可能会有很多细节没有讲到&#xff0c;希望大家自己对着代码与模板去研究。 本章代码量会比较大&#xff0c;…

赶紧3分钟学完15分钟的内容我要出去玩(8)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…

Android之获取到音视频的时长后按格式(00:00或者00:00:00)显示

1 需求 我们获取到了本地视频时长(秒为单位),然后需要按照如下格式显示 没有到小时的时长如下格式 00:00 有到小时的时长如下格式 00:00:00 2 代码实现 /*** 可以显示小时*/fun getDateStr(ms: Long): String? {val ss = 1val mi = ss * 60val hh = mi * 60val dd = …

Hello Playwright:(5)查找元素

操作浏览器归根到底就是和页面进行交互&#xff0c;那么必不可少的操作就是查找页面上的元素。因此我们需要熟练掌握Locator 定位器。在上一节我们讲过&#xff0c;可以使用Page.Locator(selector, options)方法创建定位器&#xff0c;而如何定位到元素则取决于selector 选择器…

RxSwift 之官方文档

RxSwift 官方文档结构 Introduction:SubjectsTransforming ObservablesFiltering ObservablesCombining ObservablesError Handing OperatorsObservable Utility OperatorsConditional and Boolean OperatorsMathematical and Aggregate OperatorsConnectable Observable Opera…

SQL一键备份用户数据库

大家都知道&#xff0c;Ms Sql 有自动备份的功能&#xff0c;但如果由于某种原因不能自动备份&#xff0c;或者我们想手动备份的话&#xff0c;就可以用下边的sql语句来执行备份。 --------------------代码开始------------- USE [master]------删除旧数据-------------------…

2019年甘肃省普通高等学校高职(专科)升本科考试招生工作实施办法

2019年甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试招生工作实施办法 2019年甘肃省普通高等学校高职&#xff08;专科&#xff09;升本科考试招生工作实施办法 根据教育部有关规定及要求&#xff0c;结合我省实际&#xff0c;为确保普通高等学校高职&#x…

HTML基础之bit哥的反客为主之道(9)

作者简介 作者名&#xff1a;1_bit 简介&#xff1a;CSDN博客专家&#xff0c;2020年博客之星TOP5&#xff0c;蓝桥签约作者。15-16年曾在网上直播&#xff0c;带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息&#xff0c;迷茫的你会找到答案。 目录 HTML基…