mvc中使用Pagination，对其进行再封装

对其进行再次封装：

(function($) {
            $["fn"]["easyPaging"] = function(o) {
                if (!o.pageSelect ||!$["fn"]["pagination"]) {
                    return this;
                }               
                var num = o.num || 50;                
                var opts = {
                    "items_per_page": 10,
                    "num_display_entries": 5,
                    "num_edge_entries": 1,
                    "prev_text": "< 上一页",
                    "next_text": "> 下一页",                   
                    "callback": function(page_index, jq) {}
                };
                $["extend"](opts, o || {});

                opts.callback = function(page_index, jq){
                    var select = o.pageSelect;         
                    var max_elem = Math.min((page_index+1) * opts.items_per_page, num);
                    select(page_index + 1, page_index * opts.items_per_page, max_elem);
                    return false;
                }
                var sumPage = Math.ceil(num/opts.items_per_page);
                opts.bindclick = function(pageSelected){
                    $("#hx_getPageData").on("click",function(evt){
                        var hxpageIndex = $.trim($("#hx_pageIndex").val());
                        if(hxpageIndex.length == 0 || hxpageIndex <= 0)
                        {
                            hxpageIndex = 1;
                            $("#hx_pageIndex").val(1);
                        }
                        if(hxpageIndex > sumPage)
                        {
                            hxpageIndex = sumPage;
                            $("#hx_pageIndex").val(hxpageIndex);
                        }
                        pageSelected(hxpageIndex-1,evt);
                    });
                }                
                var othertext = '<span>共' + sumPage + '页,去第</span><input type="text" id="hx_pageIndex" />页
<input type="button" id="hx_getPageData" value="确定" />';
                
                var thisObj = $(this);   
                $(othertext).insertAfter(thisObj);             
                thisObj.pagination(o.num, opts);                
            };

        }(jQuery)); 

使用方式：

        function pageSelect(pindex, start,end){              
            $.get( '@Url.Action("PersonDetail", "PageTest")'+'?pindex=' + pindex + "&start=" + start + "&end=" + end,
            function(data) {
                $('#Searchresult').html(data);
            });
            return false;
        }
        $(document).ready(function(){

            $("#Pagination").easyPaging({num:195,pageSelect:pageSelect});
        });

整个页面：

@section css
{
    <link href="@Url.Content("~/Scripts/Pagination/Pagination.css")" rel="stylesheet" type="text/css" />
    
}

<div id="Pagination" class="pagination"></div>
<br style="clear:both;"/>
<h3>List of former members of the United States House of Representatives (A)</h3>
<div id="Searchresult"></div>
@section script{
   <script src="@Url.Content("~/Scripts/Pagination/myPagination.js?v=11")" charset="UTF-8" type="text/javascript"></script> 
   <script type="text/javascript">
           (function($) {
            $["fn"]["easyPaging"] = function(o) {
                if (!o.pageSelect ||!$["fn"]["pagination"]) {
                    return this;
                }               
                var num = o.num || 50;                
                var opts = {
                    "items_per_page": 10,
                    "num_display_entries": 5,
                    "num_edge_entries": 1,
                    "prev_text": "< 上一页",
                    "next_text": "> 下一页",                   
                    "callback": function(page_index, jq) {}
                };
                $["extend"](opts, o || {});

                opts.callback = function(page_index, jq){
                    var select = o.pageSelect;         
                    var max_elem = Math.min((page_index+1) * opts.items_per_page, num);
                    select(page_index + 1, page_index * opts.items_per_page, max_elem);
                    return false;
                }
                var sumPage = Math.ceil(num/opts.items_per_page);
                opts.bindclick = function(pageSelected){
                    $("#hx_getPageData").on("click",function(evt){
                        var hxpageIndex = $.trim($("#hx_pageIndex").val());
                        if(hxpageIndex.length == 0 || hxpageIndex <= 0)
                        {
                            hxpageIndex = 1;
                            $("#hx_pageIndex").val(1);
                        }
                        if(hxpageIndex > sumPage)
                        {
                            hxpageIndex = sumPage;
                            $("#hx_pageIndex").val(hxpageIndex);
                        }
                        pageSelected(hxpageIndex-1,evt);
                    });
                }                
                var othertext = '<span>共' + sumPage + '页,去第</span><input type="text" id="hx_pageIndex" />页
<input type="button" id="hx_getPageData" value="确定" />';
                
                var thisObj = $(this);   
                $(othertext).insertAfter(thisObj);             
                thisObj.pagination(o.num, opts);                
            };

        }(jQuery)); 
        function pageSelect(pindex, start,end){              
            $.get( '@Url.Action("PersonDetail", "PageTest")'+'?pindex=' + pindex + "&start=" + start + "&end=" + end,
            function(data) {
                $('#Searchresult').html(data);
            });
            return false;
        }
        $(document).ready(function(){

            $("#Pagination").easyPaging({num:195,pageSelect:pageSelect});
        });
   
    </script>
}

使用ajax请求部分视图：

@model List<MvcApp.Models.Person>

<table>
<thead>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>NicName</td>
        <td>Tel</td>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.Id</td>
            <td>@item.Name</td>
            <td>@item.NicName</td>
            <td>@item.Tel</td>
        </tr> 
    }
</tbody>
</table>
<p>pageIndex:@ViewBag.pageIndex</p>

控制器：

        public ActionResult PersonDetail(int pindex)
        {
            ViewBag.pageIndex = pindex;
            return PartialView(GetDatas());
        }
        public List<Person> GetDatas()
        {
            return new List<Person>
            {
                new Person{Id=1,Name="ly1",NicName="llllyyyy",Tel="135"},
                new Person{Id=2,Name="ly2",NicName="llllyyyy",Tel="135"},
                new Person{Id=3,Name="ly3",NicName="llllyyyy",Tel="135"},
                new Person{Id=4,Name="ly4",NicName="llllyyyy",Tel="135"},
                new Person{Id=5,Name="ly5",NicName="llllyyyy",Tel="135"},
                new Person{Id=6,Name="ly6",NicName="llllyyyy",Tel="135"},
                new Person{Id=7,Name="ly7",NicName="llllyyyy",Tel="135"},
                new Person{Id=8,Name="ly8",NicName="llllyyyy",Tel="135"},
                new Person{Id=9,Name="ly9",NicName="llllyyyy",Tel="135"},
                new Person{Id=10,Name="ly10",NicName="llllyyyy",Tel="135"}
            };
        

/**
 * This jQuery plugin displays pagination links inside the selected elements.
 *
 * @author Gabriel Birke (birke *at* d-scribe *dot* de)
 * @version 1.2
 * @param {int} maxentries Number of entries to paginate
 * @param {Object} opts Several options (see README for documentation)
 * @return {Object} jQuery Object
 */
jQuery.fn.pagination = function(maxentries, opts){
    opts = jQuery.extend({
        items_per_page:10,
        num_display_entries:10,
        current_page:0,
        num_edge_entries:0,
        link_to:"#",
        prev_text:"Prev",
        next_text:"Next",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        //other_text: "",
        callback:function(){return false;},
        bindclick:function(){}
    },opts||{});
    
    return this.each(function() {
        /**
         * Calculate the maximum number of pages
         */
        function numPages() {
            return Math.ceil(maxentries/opts.items_per_page);
        }
        
        /**
         * Calculate start and end point of pagination links depending on 
         * current_page and num_display_entries.
         * @return {Array}
         */
        function getInterval()  {
            var ne_half = Math.ceil(opts.num_display_entries/2);
            var np = numPages();
            var upper_limit = np-opts.num_display_entries;
            var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
            var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
            return [start,end];
        }
        
        /**
         * This is the event handling function for the pagination links. 
         * @param {int} page_id The new page number
         */
        function pageSelected(page_id, evt){
            current_page = page_id;
            drawLinks();
            var continuePropagation = opts.callback(page_id, panel);
            if (!continuePropagation) {
                if (evt.stopPropagation) {
                    evt.stopPropagation();
                }
                else {
                    evt.cancelBubble = true;
                }
            }
            return continuePropagation;
        }
        
        /**
         * This function inserts the pagination links into the container element
         */
        function drawLinks() {
            panel.empty();
            var interval = getInterval();
            var np = numPages();
            // This helper function returns a handler function that calls pageSelected with the right page_id
            var getClickHandler = function(page_id) {
                return function(evt){ return pageSelected(page_id,evt); }
            }
            // Helper function for generating a single link (or a span tag if it's the current page)
            var appendItem = function(page_id, appendopts){
                page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
                appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
                if(page_id == current_page){
                    var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
                }
                else
                {
                    var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
                        .bind("click", getClickHandler(page_id))
                        .attr('href', opts.link_to.replace(/__id__/,page_id));
                        
                        
                }
                if(appendopts.classes){lnk.addClass(appendopts.classes);}
                panel.append(lnk);
            }
            // Generate "Previous"-Link
            if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
                appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
            }
            // Generate starting points
            if (interval[0] > 0 && opts.num_edge_entries > 0)
            {
                var end = Math.min(opts.num_edge_entries, interval[0]);
                for(var i=0; i<end; i++) {
                    appendItem(i);
                }
                if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
                {
                    jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
                }
            }
            // Generate interval links
            for(var i=interval[0]; i<interval[1]; i++) {
                appendItem(i);
            }
            // Generate ending points
            if (interval[1] < np && opts.num_edge_entries > 0)
            {
                if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
                {
                    jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
                }
                var begin = Math.max(np-opts.num_edge_entries, interval[1]);
                for(var i=begin; i<np; i++) {
                    appendItem(i);
                }
                
            }
            // Generate "Next"-Link
            if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
                appendItem(current_page+1,{text:opts.next_text, classes:"next"});
            }
//            panel.append(jQuery(opts.other_text));

        }
        
        // Extract current_page from options
        var current_page = opts.current_page;
        // Create a sane value for maxentries and items_per_page
        maxentries = (!maxentries || maxentries < 0)?1:maxentries;
        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
        // Store DOM element for easy access from all inner functions
        var panel = jQuery(this);
        // Attach control functions to the DOM element 
        this.selectPage = function(page_id){ pageSelected(page_id);}
        this.prevPage = function(){ 
            if (current_page > 0) {
                pageSelected(current_page - 1);
                return true;
            }
            else {
                return false;
            }
        }
        this.nextPage = function(){ 
            if(current_page < numPages()-1) {
                pageSelected(current_page+1);
                return true;
            }
            else {
                return false;
            }
        }
        // When all initialisation is done, draw the links
        drawLinks();
        // call callback function
        opts.callback(current_page, this);
        opts.bindclick(pageSelected);        
    });
}

css:

.pagination {
            font-size: 80%;
        }
        
.pagination a {
    text-decoration: none;
    border: solid 1px #AAE;
    color: #15B;
}

.pagination a, .pagination span {
    display: block;
    float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #26B;
    color: #fff;
    border: solid 1px #AAE;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;
}