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>  

jquery分页插件

上一篇:学习ThinkPHP框架必须了解的知识点(一)


下一篇:JS框架整理