提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery实现pager控件示例

jQuery 实现 示例 控件
2023-06-13 09:15:24 时间

js：

复制代码代码如下:

$.fn.extend({JPager:function(cfg,pageIndex,pageSize){
    if(cfg&&pageIndex>0&&pageSize>0){
        vartoken="#"+this.attr("id");
        this.empty();
        varpageFirst=function(){
            $(token).JPager(cfg,1,pageSize);
        };

        varpagePre=function(){
            $(token).JPager(cfg,pageIndex-1,pageSize);
        };

        varpageLast=function(){
            $(token).JPager(cfg,parseInt($("#_tot").val()),pageSize);
        };

        varpageNext=function(){
            $(token).JPager(cfg,pageIndex+1,pageSize);
        };

        varpageNumber=function(){
            $(token).JPager(cfg,parseInt($(this).text()),pageSize);
        };

        varpageGo=function(){
            varindex=parseInt($("#_pos").val());
            vartotal=parseInt($("#_tot").val());
            if(index){
                if(index>total){
                    $(token).JPager(cfg,total,pageSize);
                }
                elseif(index<1){
                    $(token).JPager(cfg,1,pageSize);
                }
                else{
                    $(token).JPager(cfg,index,pageSize);
                }
            }
        };
        varcheckGoNumber=function(){
            if(!Number(this.value)){
                this.value="";
            }
            else{
                this.value=Number(this.value);
            }
        };
        varinitCustomer=function(recordCount){
            if(cfg.customer){
                if(cfg.customer.template){
                    vart=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);
                    }
                }
            }
        };

        varchangeState=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");
            }
        };
        varinitNumber=function(total,count,current){
            if(total>0&&count>0){
                if(current<1){
                    current=1;
                }
                if(current>total){
                    current=total;
                }
                varendIndex=total;
                varstartIndex=1;
                vartemp=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(vari=startIndex;i<=endIndex;i++){
                    varhtml=$("<span></span>").text(i).bind("click",pageNumber);
                    if(i==current){
                        $("#_number").append(html.attr("class","selected"));
                    }
                    else{
                        $("#_number").append(html.attr("class","number"));
                    }
                }
            }
        };

        varinitPager=function(data){
            if($.isArray(data.SearchResult)&&data.RecordCount>0){
                $(token).append("<spanid="_left"><spanid="_first"class="spcial">首页</span> <spanid="_pre"class="spcial">上一页</span></span> <spanid="_number"></span><spanid="_go"><inputid="_pos"type="text"/><inputid="_to"type="button"value="GO"/></span> <spanid="_right"><spanid="_next"class="spcial">下一页</span> <spanid="_last"class="spcial">末页</span></span><inputid="_tot"type="hidden"/>");
                vartotal=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){
                vard=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：

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>分页控件示例</title>
   <linkhref="CSS/JPager.css"rel="stylesheet"type="text/css"/>
   <scriptsrc="JS/jquery.min.js"type="text/javascript"></script>
   <scriptsrc="JExtension/JPager.js"type="text/javascript"></script>
   <scripttype="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>
<divid="pager"></div>
</body>
</html>

　　
wcf：
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.ServiceModel.Activation;
usingSystem.ServiceModel.Web;

namespaceJPlugin
{
   [ServiceContract]
   [AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
   publicclassJService
   {
       [OperationContract]
       [WebInvoke]
       publicPageObject<Person>GetPersons(stringname,intpageIndex,intpaseSize)
       {
           returnnewPageObject<Person>(){RecordCount=23,SearchResult=newList<Person>(){newPerson(){Name="zhpulq",Age=28},newPerson(){Name="zhouxy",Age=24}}};
       }
   }


   publicclassPageObject<T>
   {
       publicintRecordCount{get;set;}
       publicList<T>SearchResult{get;set;}
   }
}

相关文章