jquery 페이징 플러그인 AmSetPager(자체 작성)_jquery
- WBOY원래의
- 2016-05-16 17:36:581039검색
처음 플러그인을 만들 때 이미 작성해 두었는데 나중에 jquery 플러그인 템플릿을 찾아서 가져와서 사용했습니다. 이름은 jquery.boilerplate.js입니다. 나의 이해도가 그리 깊지 않고, 효율성 문제도 많이 이해하지 못합니다.
저는 원래 asp.net 개발자였지만, 회사 내 아티스트를 포함해 많은 사람들이 js를 잘 하지 못했습니다. 프로젝트에 js 변경사항이 너무 많아서 머리가 어질어질했습니다. 플러그인을 작성하자는 생각이 떠올랐기 때문에 같은 패턴을 따랐습니다. 플러그인을 작성하는 과정에서 JS의 객체지향적 성격도 배웠습니다. 나는 js와 일부 효율성 문제에 대해 더 깊이 이해하고 있습니다. 예전에 한 페이지에 600줄이 넘는 js 파일을 작성했던 프로젝트가 있었습니다. 그것들은 모두 기능 지향적이고 프로세스 지향적인 방식으로 작성되었습니다. 다시 살펴보기에는 너무 지저분합니다. 먼저 플러그인에 대해 이야기하겠습니다.
AmSetPager라는 플러그인을 먼저 살펴보겠습니다.
여기에서 다운로드하세요: 다운로드하려면 클릭하세요
내 플러그인이 데이터 표시 컨테이너 $("#DataContent").AmSetPager({. ..}) 매개변수에서 페이징 컨테이너 요소 ID를 구성합니다. 플러그인을 작성한 후 다른 플러그인이 모두 페이징 요소 ID를 호출하는 것을 보았습니다
소스코드 게시:
코드 복사 코드는 다음과 같습니다.
(function ( $, window, document, undefine ) {
// 기본값을 한 번 생성
varpluginName = "AmSetPager",
defaults = {
pagerName: "pager ", //페이징 컨테이너
viewCount: 5, //표시할 수 있는 데이터 수
dataCount: 0, //백그라운드에서 데이터를 가져오는 경우 총 개수는 얼마입니까(정적 데이터는 사용되지 않음)
selectClass: "selectno" , //선택된 스타일
listCount:10, //표시되는 페이지 번호 수(이전 페이지와 다음 페이지 제외), mode=default인 경우 값을 5 이상으로 설정해야 합니다.
enablePrevNext:true, //이전 페이지와 다음 페이지를 허용합니다. 표시
enableFirst:true, //한 페이지만 허용 페이지의 경우 페이지 번호 표시
template:"default", //템플릿(현재는 기본값만)
mode:" static", //"url" 또는 "ajax"
urlparameter:" ", //url 매개변수 다음에 aa=1&bb=2...
callback:null //콜백 함수(ajax 데이터 또는 정적) 사용 가능)
};
// 실제 플러그인 생성자
function Plugin( element, options ) {
this.element =
this.options = $ .extend({}, defaults, options );
//this._defaults = defaults;
this._name = 플러그인 이름;
this.init()}
//비공개
//URL 매개변수 가져오기
var getQueryString = function ( name) {
var reg = new RegExp("(^|&)" name "=([^&]*)(& |$)", "i");
var r = window.location .search.substr(1).match(reg);
if (r != null) return unescape(r[2]) ; 정의되지 않음 반환
}
//정적 템플릿 데이터 표시
var Bind_StaticData = function($content,minnum,maxnum) {
if (minnum > 0) {
$content. children(":gt(" (최소 숫자 - 1) "):lt(" 최대 숫자 ")").css("표시", "차단")
} else {
$content.children(" :lt(" maxnum ")").css("display", "block" );
}
$content.children(":lt(" (minnum) ")").css("display ", "none");
$content.children(":gt( " (maxnum - 1) ")").css("display", "none");
}
//Main
//SetPager 클래스 생성
var SetPager = function (options,pageCount){
this.op = options;
this.pageCount =
}
SetPager.prototype = {
//요소로 형식 지정
FormatStr: function(pageNo, pageText) {
var href = this.op.mode=='url'?location.pathname "?" this.op.urlparameter "&p=" pageNo:"javascript:void(0);"
if (typeof (pageText) == "number") {
return "" pageText ""
}
return "" ";
},
//요소 선택 상태
FormatStrIndex : function(pageNo){
return "" pageNo " ";
},
//기본 템플릿 초기화 페이지 번호 수집
InitDefaultList: function(_pageIndex){
if(this.op.listCount<5)
throw new Error("listCount는 5보다 커야 합니다."); //listCount>5
var pageIndex =parseFloat(_pageIndex); //숫자로 변환
var ns = new Array(); = new Array(this.op.listCount);
if (pageIndex >= this .op.listCount) {
numList[0] = 1;
numList[1] = "…"; 🎜>var infront = 0;
var inback = 0;
var inflag = Math.floor((this.op.listCount-2)/2)
if(this.op.listCount%2) ==0){
infront = inflag-1;
inback = inflag;
}else{
infront = inflag;
inback = inflag; pageIndex inback >= this.pageCount) {
for (i = this.pageCount - (this.op.listCount-3); i < this.pageCount 1; i ) {
ns.push(i );
}
for (j = 0; j <= (this .op.listCount-3); j ) {
numList[j 2] = ns[j];
}
for (i = pageIndex - infront; i <= pageIndex inback ; i ) {
ns.push(i)
}
for (j = 0; j < ; (this.op.listCount-2); j ) {
numList[j 2 ] = ns[j]
}
} else {
if (this.pageCount >= this .op.listCount) {
for (i = 0; i < this.op .listCount; i ) {
numList[i] = i 1
}
} else {
for (i = 0; i < this.pageCount; i ) {
numList [i] = i 1
}
}
}
return numList; ,
//페이지 번호 생성
InitPager: function(pageIndex){
$("#" this.op.pagerName).html('')
if(this.op.enableFirst) ==false&&this.pageCount<=1){
return null;
}
var array = new Array()
//var finalarr = new Array(); = $("#" this.op.pagerName);
switch(this .op.template){ //템플릿 선택
case 'default':array = this.InitDefaultList(pageIndex,this. pageCount);break;
default:array = this.InitDefaultList(pageIndex,this.pageCount) ;
}
if(!array instanceof Array){
throw new Error("배열이 아닙니다." );
}
if(array.length!=this.op.listCount) {
throw new Error("array.length error:" array.length)
}
if (pageIndex>1&&this.op.enablePrevNext){
$con.append(this.FormatStr( pageIndex-1,'이전 페이지'))
}
for(var i=0;i
계속
}
if(pageIndex==array[i]){
$con.append(this.FormatStrIndex(array[i]));
}else if(typeof array[i]=='number'){
$con.append(this.FormatStr(array[i],array[i]));
}else{
$con.append(array[i]);
}
}
if(pageIndex
}
//$("#" this.op.pagerName).append(finalarr);
}
}
Plugin.prototype = {
//初始化
init: function() {
var options = this.options;
var $thisbase = $(this.element);
var $content;
if($thisbase.is(':has(tbody)')){
$content=$thisbase.children();
}
else{
$content=$thisbase;
}
var count = options.mode=='static'?$content.children().length:options.dataCount;
var Eachcount = options.viewCount;
var totalpage = Math.ceil(count /eachcount);
var $pager = $("#" options.pagerName);
var setpager = new SetPager(options,totalpage); //초기화
if(options.mode=='url'){
var urlindex = getQueryString("p");
if(isNaN(urlindex)){
setpager.InitPager(1);
}else{
setpager.InitPager(urlindex>totalpage?totalpage:urlindex);
}
}else{
setpager.InitPager(1);
if(options.mode=='static'&&typeof options.callback!='function'){
Bind_StaticData($content,0,eachcount);
}else{
options.callback($content,1,options.viewCount);
}
$pager.bind("click",function(e){ //click事件
if(e.target.tagName!='A') return;
var $this = $(e.target);
$this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//..
var indexnum = parseInt($this.html())==$this.html()?parseInt($this.html()):parseInt($this.attr('i'))
var maxnum = (indexnum) *eachcount);
var minnum = (indexnum - 1) *eachcount;
if(options.mode!='static'&&options.mode!='ajax'){
throw new Error("mode) 선택해야 함:static,url,ajax");
}
if(options.mode=='static'&&typeof options.callback!='function'){
setpager.InitPager(indexnum);
Bind_StaticData($content,minnum, maxnum);
}else{
setpager.InitPager(indexnum)
options.callback($content,indexnum,options.viewCount)
}
});
}
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_"pluginName) ) {
$.data(this, "plugin_" 플러그인 이름, 새 플러그인( this, options ))
}
});
};
})( jQuery, 창, 문서 );
说一下样式(.pager就是分页元素class)：
复aze代码 代码如下:
유삼방방형, 一个是页面中数据容器유전체부数据, 这时就是모드:'정적'。还有就是ajax按分页方式取数모드 :'ajax'，还有根据url传参分页mode:'url'（我感觉这时估计不会用到吧）。
首先静态的：
html:
复代码 代码如下:
1aaaaaaaaaaaaaaaaaaaaa |
2aaaaaaaaaaaaaaaaaaaaa |
3aaaaaaaaaaaaaaaaaaaaa |
4aaaaaaaaaaaaaaaaaaaaa |
5aaaaaaaaaaaaaaaaaaaaa |
6aaaaaaaaaaaaaaaaaaaaa |
7aaaaaaaaaaaaaaaaaaaaa |
8aaaaaaaaaaaaaaaaaaaaa |
9aaaaaaaaaaaaaaaaaaaaa |
