[Jquery DataTables] 라이브러리 기본 사용법

자바스크립트 grid 라이브러리인 DateTables 기본 사용법

[스프링 부트/RestController]

원격에서 data를 받아와서 테이블에 출력시키는 기능을 구현하고자 한다.

jquery datatables library는 테이블과 데이터를 쉽게 binding하여 구현할 수 있게 도와준다.

공식홈페이지에 예시도 잘 나와있고, 포럼도 활성화되어있어서 쉽게 사용할 수 있다.

기본적으로 jquery, datatables 등 css, js를 추가한다.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" />

<script src="<c:url value='/js/jquery-3.5.1.min.js'/>" charset="utf-8"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js">
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js">

 

사용법은 아래와 같다.

<div class="container">
  <h1>사전</h1>		
    <table id="dic" class="display" style="width:100%">
      <thead>
      <tr>
        <th>순번</th>
        <th>이름</th>
        <th>설명</th>
        <th>구분1</th>
        <th>구분2</th>
        <th>등록자</th>
      </tr>
    </thead>			
  </table>
</div>

필수로 table과 thead영역이 필요하다. tbody는 library가 알아서 만들 예정~

<script type="text/javascript">
var url = "http:/localhost:7800/dic";
$(function(){
  $.ajax({
    url: url
    }).done(function(d){
        var table = $("#dic").DataTable({
        data: d,
        dataSrc: "",
        columns : [
          { "data" : "ENT_ID" },
          { "data" : "ID" },
          { "data" : "NAME" },
          { "data" : "TYPE1" },
          { "data" : "TYPE2" },
          { "data" : "REG_USER" }
        ],
        columnDefs: [
          {
          "targets" : [5],
          "visible" : false
          }
        ]
    });
  })
})
</script>

필수로 jquery와 jquery.dataTables를 삽입한다.

정확한 원인은 모르겠는데 dataTables 다큐멘테이션에서 사용하는 기본 사용법으로 데이터가 안 불러 와져서(추측상 원격에서 데이터를 불러와서 그런 것 같음) 위와 같이 사용했다.

ajax로 데이터를 받아서 data에 세팅해준다. 이때 data는 반드시 json형태여야 한다.

 

아래 컨트롤러와 위 화면단은 다른 포트를 사용한다. 

@RestController
public class DicController {
	@Autowired
	private DicService dicSvc;	
	
	@GetMapping(value = "/dic", produces="application/json; charset=UTF-8")
	public List<Map> dict() {		
		List<Map> dicList = new ArrayList<Map>();
		try {
			dicList = dicSvc.selectDictionary(null);
		} catch (Exception e) {
			e.printStackTrace();
		}		
		return dicList;
	}
	
}

 

일단 기본적인 사용방법은 위와 같고, 자세한 건 다른 포스트에서 다뤄보도록 하겠습니다.