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 : 페이지 번호
| 비동기 통신 결과값 예시 data.paging : { totalCnt : 3, pageNo : 1, pageSize : 10 } data.result : [ {no : 1, title : 'title1', date : '2020-01-01'}, {no : 2, title : 'title2', date : '2020-01-01'}, {no : 3, title : 'title3', date : '2020-01-01'}, ] *만약 결과를 하나의 Object로 작업을 해야 한다면, tableMaker에서 data.paging으로 되어있는 코드를 변경하여 사용 |
(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 ));
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [Javascript]특정 시간에 함수 실행 (0) | 2021.01.08 |
|---|---|
| 언더스코어 활용하기 ( 데이터 정렬 ) (0) | 2019.03.10 |
| [Javascript] var vs let and const (0) | 2019.01.22 |
| JavaScript 파일에 외부 JS 포함 및 사용 (0) | 2012.11.14 |
| JavaScript 브라우저별 Keycode (0) | 2012.04.26 |