[JavaScript] Datatables - Dom 설정

Jisoo Choi·2021년 12월 8일
1

Javascript

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

sDom 기본 설정 옵션

옵션설명
lLength changing / 길이변경
fFiltering input / 필터링 입력
tThe table! / 테이블!
iInformation / 정보
pPagination / 페이지 매김
rpRocessing / 처리
HjQueryUI theme "header" classes
('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
FjQueryUI theme "footer" classes
('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
BButton
'<' 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

profile
👩‍🚀 No worries! Just record

0개의 댓글