JQuery_jquery를 사용하여 구현된 페이징 플러그인 공유

AMD 사양 및 requireJS와 호환되는 간단한 jQuery 페이징 플러그인입니다.

/**
 * jQuery分页插件
 * */
;(function (factory) {
  if (typeof define === "function" && define.amd) {
    // AMD模式
    define([ "jquery" ], factory);
  } else {
    // 全局模式
    factory(jQuery);
  }
}(function ($) {
   
   //定义MyPagePlugin的构造函数
  MyPagePlugin = function(ele, option) {
     //  this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>&laquo;</a></li><li><a id='prevPageli'>&lsaquo;</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>页,共<span id='allPageCountSpan'></span>页</a></li><li><a id='nextPageli'>&rsaquo;</a></li><li><a id='lastPageli'>&raquo;</a></li></ul></nav>";
  this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>&laquo;</a><a class='previous prevPageli'>&lsaquo;</a><a class='present'>第<span class='curPageNoSpan'></span>页,共<span class='allPageCountSpan'></span>页</a><a class='next nextPageli'>&rsaquo;</a><a class='last lastPageli'>&raquo;</a></div>"
 
    this.$element = ele;
    /**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/
    this.defaults = {
      page:1,
      pageCount:1,
      onPaged:function(pageNo){}
    };
    this.options = $.extend({}, this.defaults, option);
 
  }
  //定义MyPagePlugin的方法
  MyPagePlugin.prototype = {
    initPlugin:function(){
      this.$element.empty();
       this.$element.append(this.viewHtml);
       this.options.onPaged(this.options.page);//初始化
       this.$element.find(".curPageNoSpan").text(this.options.page);
       this.$element.find(".curPageNoSpan").data("options",this.options);
       this.$element.find(".allPageCountSpan").text(this.options.pageCount);
       this.$element.find(".firstPageli").on("click",function(e){
         
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
           return false;
        }else{
           
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);
        }
        return false;
       });
       this.$element.find(".prevPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        if(curNo==1){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);
        }
        return false;
       });
       this.$element.find(".nextPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
          return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);
        }
        return false;
       });
       this.$element.find(".lastPageli").on("click",function(e){
        var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();
        curNo=parseInt(curNo);
        var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();
        pageCount=parseInt(pageCount);
        if(curNo==pageCount){
           return false;
        }else{
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);
          $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);
        }
        return false;
       });
       
    }
 
 
  }
  $.fn.pagePlugin = function (option) {
    var pagePlugin=new MyPagePlugin(this,option);
    pagePlugin.initPlugin();
  };
}));

CSS

.pageplugin {
 display: inline-block;
 border: 1px solid #CDCDCD;
 border-radius: 3px; }
 
.pageplugin a {
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 outline: none;
 border-right: 1px solid #CDCDCD;
 border-left: 1px solid #CDCDCD;
 color: #767676;
 vertical-align: middle;
 text-align: center;
 text-decoration: none;
 font-weight: bold;
 font-size: 16px;
 font-family: Times, 'Times New Roman', Georgia, Palatino;
  background-color: #f7f7f7;
 /* ATTN: need a better font stack 
 background-color: #f7f7f7;
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
 background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);
 background-image: linear-gradient(#f3f3f3, lightgrey); */}
 .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active {
  color:#0099CC;
  background-color: #cecece;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));
  background-image: -webkit-linear-gradient(#e4e4e4, #cecece);
  background-image: linear-gradient(#e4e4e4, #cecece); }
 .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active {
  background-color: #f3f3f3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));
  background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);
  background-image: linear-gradient(#f3f3f3, lightgrey);
  color: #A8A8A8;
  cursor: default; }
 
.pageplugin a:first-child {
 border: none;
 border-radius: 2px 0 0 2px; }
 
.pageplugin a:last-child {
 border: none;
 border-radius: 0 2px 2px 0; }
 
 .pageplugin .present {
 float: left;
 margin: 0;
 padding: 0;
 width: 120px;
 height: 20px;
 outline: none;
 border: none;
 vertical-align: middle;
 text-align: center; }

jquery 페이징 플러그인 사이페이저

Cypager는 JquerySchool 웹사이트에서 네티즌들이 공유한 작품입니다. 테스트 결과 플러그인은 IE8, Chrome 및 Firefox 브라우저와 호환됩니다. . .

호출 방법

jquery 플러그인이므로 cypager.min.js를 가져오기 전에 jquery.min.js를 가져와야 합니다. 저는 1.7.2 버전을 사용하고 있으며 하위 버전을 사용해 본 적이 없습니다.
CSS 가져오기: 77f1c420b875bc78de605f816de3e02f
js 소개: 7f0bdda60b9531a8e26bd6495e700e82

$(function(){
  $("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){
    alert("跳转至页面:"+count+"");
  }});
});

매개변수 설명
pgerId //플러그인 ID 기본값: cy_pager
pg_size //각 페이지에 표시되는 레코드 수 기본값: 10
pg_cur_count //현재 페이지 번호(기본적으로 지정된 페이지를 표시해야 하는 경우 설정)
pg_total_count //총 레코드 수
pg_nav_count //표시되는 내비게이션 번호 수 기본값: 7
pg_prev_name //이전 페이지 버튼 이름 (기본값: PREV)
pg_next_name //다음 페이지 버튼 이름 (기본값: NEXT)
pg_call_fun(page_count) //콜백 함수, 버튼을 클릭하면 실행

효율적인 JQUERY 페이징 플러그인 소스 코드 JQUERY.PAGER.JS

이 기사에서는 매우 유용한 페이징 플러그인인 jQuery.pager.js를 공유합니다. 이 플러그인의 장점은 콘텐츠를 색인화하고 jQuery를 사용하며 jquery.pager.js 파일도 호출할 수 있다는 것입니다. 페이징은 Ajax를 기반으로 합니다. 물론 Ajax를 사용하여 페이징을 구현할 계획이 없다면 이 플러그인을 사용하지 않는 것이 좋습니다. Ajax 기술을 사용하여 상호 작용하는 웹 사이트를 위해 주로 준비되었으며 쉽게 삽입할 수 있습니다. 웹 사이트 시스템으로 이동하여 Ajax 페이징 기능을 구현하십시오. 이 효과가 보기에 좋지 않다고 생각되면 페이징 버튼 스타일을 다시 작성할 수 있습니다. 너 자신

HTML 코드는 매우 간단합니다. 페이징 코드용 DIV만 준비하면 됩니다

<div class="tcdPageCode"></div>

jQuery를 통해 호출할 수 있습니다

$(".tcdPageCode").createPage({
 pageCount:6,
 current:1,
 backFn:function(p){
 console.log(p);
 }
});