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

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

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

/*
* JS分页控件，V1.0
*
* Copyright 2011, Leo.Liu  mail:wuyis.llq@gmail.com
*
* 用法一：$.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分页控件代码