implémentation jquery du contrôle de pager example

js :

Copier le code Le code est le suivant :

$.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 {
                   $(à ken).JPager( cfg, total, pageSize);
                }
                sinon si (index < 1) {
                    $(token) ken).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 er.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 = fonction (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 = fonction (total, nombre, courant) {
            si (total > 0 && compte > 0) {
                if (actuel < 1) {
                   actuel = 1 ;
                }
                si (actuel > total) {
                    actuel = total ;
                }< ) {
                    if (temp < ; count) {
                        endIndex = count;
                   }
                    else {
                        startIndex = temp - count 1;
                        endIndex = temp;
                   }
                 }
               else {
                    si (total > nombre) {
                       startIndex = total - nombre 1 ;
                     >
                }
                $("#_number").empty();
                pour (var i = startIndex; i <= endIndex; i ) {
                   var html = $("").text(i).bind("click", pageNumber);
>            else {
                        $( "#_number").append(html.attr("class", "number"));
                    }
               >
            >
         };

        var initPager = function (data) {
            if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
                 $(token).append("< span id='_left'>首页上一页 < input id='_to' type='button' value='GO'/> 下一页末页 ");
                var total = Math.ceil(data.RecordCount / pageSize);
               $("#_tot").val(total);
                 $("#_pos").bind(" flou", checkGoNumber);
                $("#_to").bind("click", pageGo);

               changeState(total);
                if (cfg.showNumber && cfg.count > ; 0) {
                    initNumber(total, cfg.count, pageIndex);
                }
                initCustomer(data.RecordCount);
             }
        };

        si (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",
                       données : d,
                        succès : fonction (données) {
                           initPager(data.d);
                             cfg.action. callback(data.d);
                        >
                   });
                 }
                                                                        url: cfg.action.url,
dataType: "json",
contentType: "text/ json",
données : d,
succès : fonction (données) {
initPager(data.d);
                }
                      > }
}
}
});

css :

Copier le code

Le code est le suivant :#_pos { largeur : 40px;}.unable

{

 couleur : #BCC0BB;
}
.numéro
{
 marge : 2px;
 couleur:# 0000FF;
 text-decoration:underline; 
}
.selected
{
 marge : 2px;
 couleur : #FF0000;
 police-poids : gras ;
}




html : 