原创：仿AspNetPager写的JS分页控件，适合ajax调用

      一直在用AspNetPager.dll这个服务器端分页控件很好使，但最近产品总是要求在分页上要使用无刷新技术AspNetPager就无法使用了，公司里也有不少人写了几个分页控件封装的都不好，不利于重复使用，于是自己按照AspNetPager的设计写了这么一个jquery插件。

      它的优点是配置多，可以方便地控制，但目前css类名不支持可配置的，大家可以通过改源码或者添加配置属性。我这里贴上js源码，附件中有完整的例子。 

/*

* JS分页控件，V1.0

*

* Copyright 2011, Leo.Liu  mail:[email protected]

*

* 用法一：$.ecpAjaxPager.renderControl(当前页数, 总记录数, 每页大小, 容器ID, 翻页回调函数, 设置); 

* 例如$.ecpAjaxPager.renderControl(pageindex, 148, pagesize, 'pager1', pageChange, { showFirstLast: true, showPrevNext: true, showPageSize: true, showNumberButton: true });

* 用法二：var htmlContent = $.ecpAjaxPager.renderControl(当前页数, 总记录数, 每页大小, null, null, 设置); //修改htmlContent的内容之后设置到DOM上  $.ecpAjaxPager.bindEvent(容器ID, 翻页回调函数);

* 例如var htmlContent = $.ecpAjaxPager.renderControl(pageindex, 98, pagesize);  $('#pager2').html(pageHTML);   $.ecpAjaxPager.bindEvent('pager2', pageChange);

* 注：设置的写法为：{ showFirstLast: true, showPrevNext: true, showPageSize: true, showNumberButton: true }

*/



jQuery.extend({

    ecpAjaxPager: {

        //设置默认的配置节

        setConfig: function (cusSetting) {

            if (!cusSetting)

                cusSetting = {};



            if (!cusSetting.alwaysShow)     //该值指定是否总是显示Pager分页按件

                cusSetting.alwaysShow = false;

            if (!cusSetting.showFirstLast)  //该值指示是否在页导航元素中显示第一页和最后一页按钮

                cusSetting.showFirstLast = false;

            if (!cusSetting.showPrevNext)   //该值指示是否在页导航元素中显示上一页和下一页按钮

                cusSetting.showPrevNext = false;

            if (typeof (cusSetting.showPageIndex) == 'undefined')  //该值指示是否在页导航元素中显示页索引数值按钮

                cusSetting.showPageIndex = true;

            if (!cusSetting.showNumberButton)   //该值指示是否在页导航元素中显示跳转到某页按钮

                cusSetting.showNumberButton = false;

            if (!cusSetting.showPageSize)   //该值指定是否显示每页大小选择器

                cusSetting.showPageSize = false;

            if (!cusSetting.selectPageIndex)   //该值指示每页大小的候选值

                cusSetting.selectPageIndex = [10, 20, 30, 40];

            if (!cusSetting.numberButtonCount)   //该值指示控件的页导航元素中同时显示的数值按钮的数目

                cusSetting.numberButtonCount = 10;



            return cusSetting;

        },





        //生成分页控件

        renderControl: function (currentPageIndex, totalCount, pageSize, containerID, callback, setting) {

            setting = this.setConfig(setting);



            //计算和校验数据

            totalCount = parseInt(totalCount);

            totalCount = totalCount > 0 ? totalCount : 0;

            pageSize = parseInt(pageSize);

            pageSize = (pageSize && pageSize > 0) ? pageSize : 10;

            var pageCount = Math.floor((totalCount + pageSize - 1) / pageSize);

            currentPageIndex = parseInt(currentPageIndex);

            currentPageIndex = currentPageIndex < 1 ? 1 : currentPageIndex;

            currentPageIndex = currentPageIndex > pageCount ? pageCount : currentPageIndex;



            if (pageCount <= 1 && !setting.alwaysShow) {

                this.renderHTML(containerID, '', callback);

                return '';

            }



            var pageHTML = '<div class="pagerWraaper">';



            //生成设置每页大小的下拉框

            if (setting.showPageSize) {

                pageHTML += '<span class="">每页显示<select id="selPageSize" class="">';

                $.each(setting.selectPageIndex, function (i, item) {

                    pageHTML += '<option value="' + item + (item == pageSize ? '" selected="selected"' : '"') + '>' + item + '</option>';

                });

                pageHTML += '</select>条</span> ' + currentPageIndex + '/' + pageCount + '页(' + totalCount + '项)';

            }

            else {

                pageHTML += '<input type="hidden" id="selPageSize" value="' + pageSize + '" />';

            }





            //生成首页链接

            if (currentPageIndex <= 1) {

                if (setting.showFirstLast)

                    pageHTML += '<span class="page-icon iconFirst disabled">&lt;&lt;</span>';

                if (setting.showPrevNext)

                    pageHTML += '<span class="page-icon iconBack disabled">&lt;</span>';

            } else {

                if (setting.showFirstLast)

                    pageHTML += '<a class="page-icon iconFirst" pageindex="1">&lt;&lt;</a>';

                if (setting.showPrevNext)

                    pageHTML += '<a class="page-icon iconBack"  pageindex="' + (currentPageIndex - 1) + '">&lt;</a>';

            }





            //生成分页列表

            if (setting.showPageIndex) {

                var ne_half = Math.ceil(setting.numberButtonCount / 2);

                var ne_limit = pageCount - setting.numberButtonCount;

                var start = currentPageIndex > ne_half ? Math.max(Math.min(currentPageIndex - ne_half, ne_limit), 1) : 1;

                var end = currentPageIndex > ne_half ? Math.min(currentPageIndex + ne_half - 1, pageCount) : Math.min(setting.numberButtonCount, pageCount);



                pageHTML += '<span class="pagerIndex">';

                for (var i = start; i <= end; i++) {  //*******

                    if (i == currentPageIndex)

                        pageHTML += '<span class="on">' + i + '</span>';

                    else

                        pageHTML += '<a pageindex="' + i + '">' + i + '</a>';

                }

                pageHTML += '</span>';

            }





            //生成尾页链接

            if (currentPageIndex >= pageCount) {

                if (setting.showPrevNext)

                    pageHTML += '<span class="page-icon iconNext disabled">&gt;</span>';

                if (setting.showFirstLast)

                    pageHTML += '<span class="page-icon iconLast disabled">&gt;&gt;</span>';

            } else {

                if (setting.showPrevNext)

                    pageHTML += '<a class="page-icon iconNext" pageindex="' + (currentPageIndex + 1) + '">&gt;</a>';

                if (setting.showFirstLast)

                    pageHTML += '<a class="page-icon iconLast"  pageindex="' + pageCount + '">&gt;&gt;</a>';

            }



            //生成跳转代码

            if (setting.showNumberButton) {

                pageHTML += '<span>跳转到第<input type="text" id="tbGoToPage" class="textField1">页</span><input type="button" id="btnGoToPage" value="GO" class="toPageNo">';

            }



            pageHTML += '</div>';





            this.renderHTML(containerID, pageHTML, callback);





            return pageHTML;

        },



        renderHTML: function (containerID, pageHTML, callback) {

            if (containerID) {  //如果不设置此值，可以先修改分页控件的html代码之后，再调用bindEvent方法来绑定事件

                $('#' + containerID).html(pageHTML);

                this.bindEvent(containerID, callback);

            }

        },



        //绑定事件

        bindEvent: function (containerID, callback) {

            //分页事件

            $('#' + containerID + ' a').each(function (i, item) {

                if ($(item).attr('pageindex')) {

                    $(item).bind('click', function () {

                        callback($(item).attr('pageindex'), $('#' + containerID + ' #selPageSize').val());

                    });

                }

            });

            //跳转

            $('#' + containerID + ' #btnGoToPage').bind('click', function () {

                var page = $('#' + containerID + ' #tbGoToPage').val();

                if (!page || !page.match(/^\d+$/i)) {

                    alert('请输入要跳转到的页数');

                    $('#' + containerID + ' #tbGoToPage').focus();

                    return;

                }

                callback(page, $('#' + containerID + ' #selPageSize').val());

            });

            //            $('#' + containerID + ' #tbGoToPage').bind('keyup', function (event) {

            //                if (event.keyCode == '13') {

            //                    var page = $('#' + containerID + ' #tbGoToPage').val();

            //                    if (!page || !page.match(/^\d+$/i)) {

            //                        alert('请输入要跳转到的页数');

            //                        $('#' + containerID + ' #tbGoToPage').focus();

            //                        return;

            //                    }

            //                    //callback(page, $('#' + containerID + ' #selPageSize').val());

            //                }

            //            });

            //设置页大小

            $('#' + containerID + ' #selPageSize').bind('change', function () {

                callback(1, $('#' + containerID + ' #selPageSize').val());

            });

        }

    }

});

       附件：js分页控件代码