머리 깨져가며 알아낸 테이블 라이브러리 tabulator 사용법

tabulator를 쓰기 위한 초기 설정 

※ jquery가 tabulator보다 먼저 불러와져야함 

// jquery
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
// tabulator script
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.4.4/dist/js/tabulator.min.js"></script>
// tabulator css
<link href="https://unpkg.com/tabulator-tables@5.4.4/dist/css/tabulator_semanticui.min.css" rel="stylesheet">

 

 

https://tabulator.info/examples/5.4#theming

Tabulator - Examples

tabulator 테이블 테마를 고를수 있는 페이지 

 

link를 건 css에서 /dist/css/tabulator_semanticui.min.css 이부분만 나와있는 테마에서 마음에 드는걸 골라서 바꿔주면

적용됨 

 

HTML 기본 선언 문장

<div id="test"><div> //div의 id를 이용해 div내부에 table을 비동기로 추가해줌

 

script 기본 선언 문장

<script type="text/javascript">

$(function(){ // $(document).ready(function(){ });와 동일한 의미 웹이 시작할때 같이 시작됨
	var url = "test"; // controller에 요청을 하는 url 
    table = new Tabulator("#test", { // id:test에 Tabulator 생성 
    	layout : "fitColumns", // 테이블 크기에 컬럼을 딱 맞추는 기능 
        columns : [{       	   // controller에서 값을 받아와서 화면에 띄우기 위한 설정 
        	title : "테스트"   // 테이블 header 네임 
            field : "test"     // controller에서 받아온 Map 데이터의 string 이름  
            sorter : "string"  // controller에서 받아 와서 적용할 데이터 타입  
            }]
            }); // Tabulator 생성 설정 
     table.on("tableBuilt", function(){ // table이 무슨 작업을 할때 실행한다는 뜻
     	table.setData(url); // 설정한 url에 ajax요청을 보내 값을 가져온후 테이블에 값 적용
     }); // 
});

 

Tabulator 기본 맥락에 맞춰 기능 정리 

// 기본 맥락 정리 

var table = new Tabulator("[테이블 만들 위치의 태그 id]", {
	/* ------------- 주로 쓰는 테이블 전체적인 기능 및 CSS ------------- */
    layout : "fitColumns",
    addRowPos : false, // 새행 추가시 맨 아래 추가 
  	autoResize : false, // 테이블 자동 크기 조정 방지
    selectale : 1, // select(선택) 할수 있는 테이블 개수 지정
    pagination : "local", // 페이징 처리 
    paginationSize : 10, // 테이블 1페이지당 들어가는 컬럼 개수
    paginationCounter : "rows", // 테이블 데이터 컬럼 카운터
    movableColumns : true,
    placeholder : "데이터가 존재하지 않습니다.", // 데이터가 비어있을 경우 뜨는 글
    scrollToRowPosition : "center",
    height : "500px",
    /* ------------- // ------------- */
    
    /* ------------- columns 기본 설정 및 CSS  ------------- */
    columns : [ {
    	title : "[테이블헤더명]",
        field : "[표시할 데이터명]",
       	sorter : "string", // 가져온 데이터 자료형 설정
        headerSort : false, // 데이터 정렬 아이콘 및 기능 제거
        hozAlign : "center", // 가져온 데이터 위치 가운데 정렬 bottom, top도 존재
        headerHozAlign : "center" // 헤더 위치 가운데 정렬 "
        // columns : [{ }] 컬럼 내부에 컬럼 기입가능 
        }]
])

/* ------------- tabulator테이블에 데이터 호출  ------------- */

table.on("tableBuilt", function(){
	table.setData([컨트롤러에 호출할 url (method 기본값 GET) ]);
)}

 

번외. Tabulator 기능은 아니지만 비동기로 AJAX를 통해 데이터를 추가, 삭제 수정을 할 경우 

이렇게 하는 이유는 ajax 밖에 table.setData()를 통해 다시 테이블에 데이터를 새로고침하면 추가, 수정, 삭제 하기전 

데이터가 표시되기 때문에 무조건 컨트롤러 -> 서비스 -> DB SQL을 통해 처리 한 후 컨트롤러에서 값을 리턴 후 

success function을 처리하고 complete가 실행되서 데이터가 변동된 값이 정상적으로 출력이 가능해집니다.

$.ajax({
	type : 'POST',
    url : url,
    data : data,
    success : function(result){
    	// 통신 성공시 코드
        },
    // complete는 통신 후 success가 실행 후 실행되서 비동기식 고질적인 문제를 예방도 하면서 
    // 추가, 수정, 삭제 시 바로바로 바뀌는 모습을 볼 수 있다.
    complete : function(xhr, status) { 
			table.setData(); // 테이블 다시 불러오기 
		}
)}

 

 

 

아래 공식 Tabulator 사이트에서 더 많은 기능을 간편하게 찾을 수 있습니다~.

 

https://tabulator.info/docs/5.4/options#table

Tabulator - Setup Options

공식사이트의 전체 기능 모듈