[JavaScript] Datatables - Dom 설정

• DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리.
  • DataTables의 dom을 이용하여 테이블 레이아웃을 설정할 수 있다.

sDom 기본 설정 옵션

옵션	설명
l	Length changing / 길이변경
f	Filtering input / 필터링 입력
t	The table! / 테이블!
i	Information / 정보
p	Pagination / 페이지 매김
r	pRocessing / 처리
H	jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
F	jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
B	Button
'<' and '>'	div elements / div 요소
'<"class" and '>'	div with a class / 클래스가 있는 div
'<"#id" and '>'	div with an ID / ID가 있는 div

🔍Image

Example Code

$(document).ready( function() {
  $('#example').dataTable( {
    // 예시 1) 
    "sDom": '<"top"i>rt<"bottom"flp><"clear">'
    
    // 예시 2)
    "<'row'<'col-xs-6 col-sm-4'lB>>t"+
    "<'row'<'col-sm-3'i><'col-sm-9'p>>",
    
  } );
} );

---

Reference

• https://legacy.datatables.net/ref#sDom
• http://behstant.com/blog/jquery/jquery-datatables-sdom/