프로그래밍 남기기

Ajax 비동기 통신을 통해서 목록 데이터를 테이블 태그와 페이징 형식으로 표현하기 위해 플러그인 방식 구현

//사용법 예시
url = '/getPagingList.do';
option = {
		widthArray : [20,70,10],
		headerArray : ['순서','제목','날짜'],
		tdTemplte : [
						'<td>@{no}</td>',
						'<td>@{title}</td>',
						'<td>@{date}</td>',
					]
};
urlParams = {
	"pageSize":'10', 
	"pageNo":'1',    
	//나머지 조건값
};

$('#tableArea').tableMaker(option,url,urlParams, function ($this){
	//tr이벤트
	$this.find('tr').off().on('click',function(){
	});
});

1. URL : 비동기 통신을 위한 URL 정보

2. Option 

 - widthArray : 테이블의 넓이값을 %로 설정

 - headerArray : 테이블의 헤더명을 입력

 - tdTemplte

    + td의 클래스 및 화면에 표시될 내용을 설정

    + @{}는 형식 유지 필요

    + @{}안에 설정하는 값은 DB 컬럼값과 같은 명을 사용해야 함.

3. urlParams 

 - pageSize : 목록에 보여질 페이지 사이즈

 - pageNo : 페이지 번호

(function( $ ) {
	$.fn.tableMaker = function(option, url, urlParams, callBack) {
		
		var $this = $(this);
		
		var _this = {
				
			//비동기 통신
			ajaxCall : function(url, urlParams, callBackFunc){
				$.ajax({
					url: url,
					cache: false,
					data: urlParams,
					method: 'POST',
					dataType: 'json',
					contentType: 'application/json;charset=UTF-8',
					success: function(data, textStatus, jqXHR) {
						if(typeof callBackFunc == 'function') {
							callBackFunc(data);
						}
					},
					error: function(jqXHR, textStatus, errorThrown) {
						console.log(textStatus);
					}
				});
				
			},
		
			
			init : function(urlParams){
				//테이블 초기화
				$this.html('');
				
				_this.ajaxCall(url, urlParams, function(data) {
					
					if ( data.paging.totalCnt == 0 ){
						//검색 결과 없음.
						var html = '데이터가 존재하지 않습니다.';
                        $this.html(html);
					}else{
						//테이블 표기
						$this.html(_this.drawTable(data));
					}
					
					//페이징 이벤트 처리
					$this.find('div.paging ul li a').off().on('click',function(){
						var pagingData = $(this).attr('paging-data');
						var pageNo = 1;
						if ( pagingData ){
							pageNo = pagingData;
						}else{
							pageNo = $(this).text();
						}
						urlParams.pageNo = pageNo;
						_this.init(urlParams);
					});
					callBack($this,data);
				});
			},
		
			//페이징 HTML 생성
			drawPaging : function(data){
				var pagingHtml ='';
				
				var currentStartPage = Math.ceil(data.paging.pageNo/10)*10-9;
				var currentEndPage = currentStartPage + 9;
				var totalPageCnt   = Math.ceil(data.paging.totalCnt/data.paging.pageSize);
				
				if(currentEndPage > totalPageCnt ){
					currentEndPage = totalPageCnt;
				}
				
				pagingHtml += '<div class="paging">';
				pagingHtml += '    <ul>';
				
				if ( data.paging.pageNo > 1 ){
					pagingHtml += '        <li class="go_first"><a paging-data="1" href="javascript:;"><i class="fa fa-angle-double-left"></i></a></li>';
				}
				if ( data.paging.pageNo > 1 ){
					pagingHtml += '        <li class="go_prev"><a paging-data="'+(parseInt(data.paging.pageNo)-1)+'" href="javascript:;"><i class="fa fa-angle-left"></i></a></li>';
				}
				
				for ( var i = currentStartPage ; i <= currentEndPage ; i++){
					pagingHtml += '        <li ' 
					pagingHtml +=	( i == data.paging.pageNo ) ? 'class="on">' : '>'
					pagingHtml +=	'<a href="javascript:;">'+i+'</a></li>';
				}
				
				if( data.paging.pageNo < totalPageCnt){
					pagingHtml += '        <li class="go_next"><a paging-data="'+(parseInt(data.paging.pageNo)+1)+'" href="javascript:;"><i class="fa fa-angle-right"></i></a></li>';
				}
				
				
				if( currentEndPage < totalPageCnt){
					pagingHtml += '        <li class="go_last"><a paging-data="'+totalPageCnt+'" href="javascript:;"><i class="fa fa-angle-double-right"></i></a></li>';
				}
				pagingHtml += '    </ul>';
				pagingHtml += '</div>';
				return pagingHtml;
			},
		
			//table HTML 생성
			drawTable : function(data){
				var templteHtml ='';

				templteHtml += '        <table>' 
				
//				templteHtml += '<caption>';
//				templteHtml += data.paging.caption; 
//				templteHtml += '</caption>';
				
				templteHtml += '            <colgroup>';
				option.widthArray.forEach(function(value,index){
					templteHtml += '                <col width="'+value+'%;">';
				});
				templteHtml += '            </colgroup>';
				templteHtml += '            <thead>';
				option.headerArray.forEach(function(value,index){
					templteHtml += '                <th>'+value+'</th>';
				});
				templteHtml += '            </thead>';
				templteHtml += '            <tbody>';
				
				data.result.forEach(function(rsValue,rsIndex){
					templteHtml += '                <tr>';
					option.tdTemplte.forEach(function(value,index){
						var check = false;
						do{
							var match = value.match(/\@\{(.+?)\}/);
							if ( match && match.length >= 2 ){
								var dat = '';
								if ( rsValue[match[1]] ){
									dat = rsValue[match[1]];
								}
								value = value.replace(/\@\{(.+?)\}/, dat);
								check = true;
							}else{
								check = false;
							}
						}while(check);
						
						templteHtml += value;
					});
					templteHtml += '                </tr>';
				});

				templteHtml += '            </tbody>';
				templteHtml += '        </table>';
				templteHtml += _this.drawPaging(data);
				return templteHtml;
			}
		};
		
		_this.init(urlParams);
		
	}
}( jQuery ));