自定义pager控件

效果:

js:

 

 

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
    if (cfg && pageIndex > 0 && pageSize>0) {
        var token = "#" + this .attr( "id" );
        this .empty();
        var pageFirst = function () {
            $(token).JPager(cfg, 1, pageSize);
        };
        var pagePre = function () {
            $(token).JPager(cfg, pageIndex - 1, pageSize);
        };
        var pageLast = function () {
            $(token).JPager(cfg, parseInt($( "#_tot" ).val()), pageSize);
        };
        var pageNext = function () {
            $(token).JPager(cfg, pageIndex + 1, pageSize);
        };
        var pageNumber = function () {
            $(token).JPager(cfg, parseInt($( this ).text()), pageSize);
        };
        var pageGo = function () {
            var index = parseInt($( "#_pos" ).val());
            var total = parseInt($( "#_tot" ).val());
            if (index) {
                if (index > total) {
                    $(token).JPager(cfg, total, pageSize);
                }
                else if (index < 1) {
                    $(token).JPager(cfg, 1, pageSize);
                }
                else {
                    $(token).JPager(cfg, index, pageSize);
                }
            }
        };
        var checkGoNumber = function () {
            if (!Number( this .value)) {
                this .value = "" ;
            }
            else {
                this .value = Number( this .value);
            }
        };
        var initCustomer = function (recordCount) {
            if (cfg.customer) {
                if (cfg.customer.template) {
                    var t = cfg.customer.template;
                    t = t.replace(/\%total\%/gi, Math.ceil(recordCount / pageSize)).replace(/\%current\%/gi, pageIndex).replace(/\%recordCount\%/gi, recordCount).replace(/\%pageSize\%/gi, pageSize);
                    if (cfg.customer.position == "right" ) {
                        $( "#_right" ).after(t);
                    }
                    else {
                        $( "#_left" ).before(t);
                    }
                }
            }
        };
        var changeState = function (total) {
            if (pageIndex == 1) {
                $( "#_first" ).attr( "class" , "unable" );
                $( "#_pre" ).attr( "class" , "unable" );
            }
            else {
                $( "#_first" ).bind( "click" , pageFirst).attr( "class" , "number" );
                $( "#_pre" ).bind( "click" , pagePre).attr( "class" , "number" );
            }
            if (pageIndex == total) {
                $( "#_last" ).attr( "class" , "unable" );
                $( "#_next" ).attr( "class" , "unable" );
            }
            else {
                $( "#_last" ).bind( "click" , pageLast).attr( "class" , "number" );
                $( "#_next" ).bind( "click" , pageNext).attr( "class" , "number" );
            }
        };
        var initNumber = function (total, count, current) {
            if (total > 0 && count > 0) {
                if (current < 1) {
                    current = 1;
                }
                if (current > total) {
                    current = total;
                }
                var endIndex = total;
                var startIndex = 1;
                var temp = current + Math.floor(count / 2);
                if (temp < total) {
                    if (temp < count) {
                        endIndex = count;
                    }
                    else {
                        startIndex = temp - count + 1;
                        endIndex = temp;
                    }
                }
                else {
                    if (total > count) {
                        startIndex = total - count + 1;
                    }
                }
                $( "#_number" ).empty();
                for ( var i = startIndex; i <= endIndex; i++) {
                    var html = $( "<span></span>" ).text(i).bind( "click" , pageNumber);
                    if (i == current) {
                        $( "#_number" ).append(html.attr( "class" , "selected" ));
                    }
                    else {
                        $( "#_number" ).append(html.attr( "class" , "number" ));
                    }
                }
            }
        };
        var initPager = function (data) {
            if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
                $(token).append( "<span id='_left'><span id='_first' class='spcial'>首页</span> <span id='_pre' class='spcial'>上一页</span></span> <span id='_number'></span><span id='_go'><input id='_pos' type='text'/><input id='_to' type='button' value='GO'/></span> <span id='_right'><span id='_next' class='spcial'>下一页</span> <span id='_last' class='spcial'>末页</span></span><input id='_tot' type='hidden'/>" );
                var total = Math.ceil(data.RecordCount / pageSize);
                $( "#_tot" ).val(total);
                $( "#_pos" ).bind( "blur" , checkGoNumber);
                $( "#_to" ).bind( "click" , pageGo);
               
                changeState(total);
                if (cfg.showNumber && cfg.count > 0) {
                    initNumber(total, cfg.count, pageIndex);
                }
                initCustomer(data.RecordCount);
            }
        };
        if (cfg.action) {
            if (cfg.action.url && cfg.action.data) {
                var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf( "}" )) + ',"pageIndex":' + pageIndex + ',"pageSize":' + pageSize + "}" ;
                if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
                    $.ajax({
                        type: "post" ,
                        url: cfg.action.url,
                        dataType: "json" ,
                        contentType: "text/json" ,
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                            cfg.action.callback(data.d);
                        }
                    });
                }
                else {
                    $.ajax({
                        type: "post" ,
                        url: cfg.action.url,
                        dataType: "json" ,
                        contentType: "text/json" ,
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                        }
                    });
                }
            }
        }
    }
}
});

  

css:

 

#_pos {
    width : 40px ;
}
.unable
{
    color : #BCC0BB ;
}
.number
{
    margin : 2px ;
    color : #0000FF ;
    text-decoration : underline ;
}
.selected
{
    margin : 2px ;
    color : #FF0000 ;
    font-weight : bold ;
}
 
html
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
    < title >分页控件示例</ title >
    < link href = "CSS/JPager.css" rel = "stylesheet" type = "text/css" />
    < script src = "JS/jquery.min.js" type = "text/javascript" ></ script >
    < script src = "JExtension/JPager.js" type = "text/javascript" ></ script >
    < script type = "text/javascript" >
        $(function () {         
            $("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5);
        });       
    </ script >
</ head >
< body >
< table >
</ table >
< div id = "pager" ></ div >
</ body >
</ html >

 

wcf

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
namespace JPlugin
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class JService
    {
        [OperationContract]
        [WebInvoke]
        public PageObject<Person> GetPersons( string name, int pageIndex, int paseSize)
        {
            return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){ new Person(){Name= "zhpulq" ,Age = 28}, new Person(){Name = "zhouxy" ,Age = 24}}};
        }
    }
    public class PageObject<T>
    {
        public int RecordCount { get ; set ; }
        public List<T> SearchResult { get ; set ; }
    }
}

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值