'전체 글'에 해당되는 글 23건

  1. 2020.10.12 GIT의 개념이해
  2. 2020.10.06 dataTables.js Server-side processing
  3. 2020.10.06 dataTables.js 사용법 및 예제

출처: https://croute.tistory.com/570 [식탁 위의 프로그래머]

 

Git 이란? (wiki)

 기트(Git /ɡɪt/[1])는 프로그램 등의 소스 코드 관리를 위한 분산 버전 관리 시스템이다. 빠른 수행 속도에 중점을 두고 있는 것이 특징이다. 최초에는 리누스 토르발스 리눅스 커널 개발에 이용하려고 개발하였으나, 현재는 널리 사용되고 있다.

 Git의 작업 폴더는 모두, 전체 기록과 각 기록을 추적할 수 있는 정보를 포함하고 있으며, 완전한 형태의 저장소이다. 네트워크에 접근하거나 중앙 서버에 의존하지 않는다.

 현재 주니오 하마노(Junio Hamano)가 소프트웨어 관리를 감독하고 있다. Git은GNU 일반 공중 사용 허가서 v2 하에 배포되는 자유 소프트웨어이다. 

 

개발자 Junio Hamano, 리누스 토르발스
최근 버전 1.7.9.2 / 2012년 2월 23일
운영체제 POSIX
플랫폼 크로스 플랫폼
종류 버전 관리
라이선스 GNU 일반 공중 사용 허가서 v2
웹사이트 http://git-scm.com/

 

 전 사실, svn을 쓰다가 git으로 넘어와서 그런지, 처음에는 개념이 잘 이해가 안되었었어요.

 

그저 git을 사용했던 사람들에게 들어서 이정도는 알고 있었죠.

  • 빠르다.
  • 모두가 원본을 가진다.   
  • local에서 대부분의 작업을 할 수 있다.

 

그리고 대부분의 VCS(version control system)처럼 git도 이런 개념들을 가지고 있습니다.

(svn에도 trunk, branch, tag가 있죠.)

  • master
  • branch
  • tag

svn을 쓰던 분들은 trunk가 master로 바뀌었다고 생각하면 됩니다.


'뭐가.. 어떻게 다르다는 거야?'

'그래서 그렇게 해서 어떻게 하겠다는건데?' 

음.... 이런 생각이 드실거에요. 

 

사실 subversion(svn)을 사용하면서 제가 느꼈던 힘들었던 부분은, 다른 사람과의 공동작업에 있어서 코드를 통합하는 경우(merge, commit)에 너무 많은 충돌을 경험했었다는 것이죠.

 

실제 버전이 관리되는건(사람들은 svn 서버에 있는 코드를 받아서 작업하는것) 서버에서 해주는 일이었기에, 어쨋든 작업을 하게 되면, 서버로 코드가 모이게 됩니다. 

 

이때 여러 사람이 동시에 작업하던 클래스나 파일이 있다면.... 이제부터 힘겨워지기 시작하는거죠. 

 

git을 사용하면 이런 대부분의 문제들에 대해서 자유로워질 수 있습니다.(라고 생각하는 중...)

 

 

Git을 혼자서 사용한다면

그저 그 자체로도 branch를 만들고, 코드를 commit하고 merge하는 등 모든 버전관리 기능을 다 사용할 수 있어요.

 

  • 자신의 컴퓨터에 있는 repository(local의 repository)에서 모든 것을 다 할 수 있다.

 

예를들면, 이런 느낌이에요.

subversion을 사용할때, 혼자서 svn 서버를 돌리면서, 혼자서 서버에 commit하고 등등을 한다면..

Git을 사용했을 때는, 혼자서 쓴다면 서버가 필요없죠. [local]에서 모든것을 다 할 수 있으니까요.

git에서는 자신의 local repository가 svn의 서버에 있는 repository처럼 동작한다는것이죠.

 

 

하지만 리누스 토발즈느님께서 Git을 그렇게만 쓰라고 만든게 아니지요.

(위 wiki 인용부에도 나와있지만, 원래는 리눅스 커널 개발에서 버전관리등을 하려고 개발한게 git이라고 하지요.)

 

Git은 DVCS(Distributed version control system)이잖아요. 

원격지의 repository에 연결을 해서 다같이 작업을 해야 제 맛(?)인게 git이라고 할 수 있어요.

그리고 github.com 에 repository를 등록하고 프로젝트를 올리고 해봐야 더 재밌죠.

 

git의 장점은 여러사람이 함께 프로젝트를 진행할때 알 수 있습니다.

git에서는 내가 코드를 작성하다가, 다른 사람이 진행하고 있는 branch에 가서 코드를 보거나 특정 부분에 가서(특정 commit이나 특정 tag) 코드를 보다가 다시 내가 작업하던 코드로 돌아오고 하는 것들이 너무나 자연스럽고 빠릅니다.

 

 

 

처음에 제가 최신의 마스터 소스코드를 받아왔다고 해 봅니다.(pull)

어떤 특정 부분을 지정해서 그 부분을 보고 있는 상태를 [checkout]이라고 합니다.

즉, 저는 master를 checkout해서 보고 있는 거죠.

 

 

이제 옆에 빨간색으로 보이는데로 이동을 해서 코드를 보고 싶습니다.

그러면 그저 그 부분으로 checkout을 하기만 하면 됩니다.

 

 

이렇게 그 부분(빨간색 branch의 어떤 특정 commit)으로 체크 아웃을 하면, 그 부분을 보게 되는거죠.

 

다시 원래의 마스터 최신 코드로 돌아오는것도 master의 최신 commit을 checkout 하기만 하면 됩니다.

 

이때, 내 컴퓨터(local)에는 물리적으로 한 세트의 소스코드만 존재한다는 것이죠.

소스코드의 세트를 여러개 받아놓고 작업을 할 필요가 없습니다. 예전에 작업하던 곳으로 돌아가더라도, 소스코드는 한 세트만 가지고 있으면 되는거죠.

 

 

이게 가능하게 되는건, git이 포인터를 사용하기 때문입니다.

이 말인즉슨, 각각의 branch, commit, tag에 대해서 git은 포인터로 처리를 하고 저장한다는 것입니다.

 

그래서 이 태그에서 저 태그로, 이 브랜치에서 저 브랜치로 옮겨 다니면서도 빠르게 문제없이 옮겨다니며 작업할 수 있는것이죠. 

단지 '내가 보고 있는 곳의 포인터를, 다른곳의 포인터로 바꿔치기' 하면 되는것이니까요.

(git을 2주-3주 정도 사용해 보며, [포인터를 바꿔치기한다]라고 저는 이해를 했습니다.)

 

(물론 작업을 진행하며 충돌이 날수도 있고 여러가지 문제로 예전상태로 checkout이 안되는 경우도 있긴합니다만, 그럼에도 불구하고 svn에 비해서는 너무 빠르고 자연스럽군요.)

 

 

git을 '여러 사람이 사용할 때, 장점을 잘 알 수 있다.'라는 얘기에서 좀 벗어났네요. 다시 돌아와서 얘기를 해보죠.

 

위에서 git은 local환경에서도 모든것을 다 할 수 있다.라고 했습니다.

git은 소스코드를 가진 모든 컴퓨터(모든 컴퓨터의 git repository)가 원본이 됩니다. 그래서 누군가의 컴퓨터가 망가지고, 어딘가의 소스코드가 날아가더라도, 원본 그대로의 프로젝트를 유지하기가 쉽죠.

 

거기에다가 local에서 모든것을 할 수 있다는 말은, 원본(내 컴퓨터의 repository도 원본이니까)에서 모든 작업을 다 할 수 있다는 것이니, 작업을 진행함에 있어서도 부담이 없습니다.

(물론, push라는 명령을 통해 메인 repository(remote라고 부르는)에 해당 사항을 적용 시켜주어야 합니다.)

 

이 말을 조금 다르게 하면, 내 컴퓨터에서 모든 작업을 다 하고, 해당 코드에 대한 안정성이 확보됬을때, 실제 원격의 master에 코드를 적용할 수 있다는 거죠. 그러면서도 중간중간 자신 혼자서 개발하면서 commit한 내용들에 대한 보관도 다 이루어 집니다(local에서도 commit을 할 수 있으니...).

 

혼자서, local에서만 작업을 했더라도, 개발 이력에 대해서 트래킹이 가능하죠.

svn이 하나의 메인 repository를 놓고 각각의 개발자들이 서브가 되어 자신이 개발한걸 메인 repository에 commit하는 형식이었다면, git은 메인 repository는 존재하지만, 각각의 개발자들이 또 다른 원본의 repository를 가지면서 작업을 하게 됩니다. 그리고 자신의 컴퓨터(local)의 repository에 commit을 하게 되고, 안정성등이 확보가 된다면 메인(remote) repository에 push를 하는 방식이 되는 거죠. 이때 이 메인 repository는 실제 github enterprise일 수 있지만, 다른 누군가의 컴퓨터일수도 있습니다. 설정하기 나름이니까요.

 

master에서 branch를 하나 만들어 코드를 작업하다가, 다시 master에 merge를 통해 하나의 코드로 만든다라는 거죠. 

 

예를들어,

 

 

1. 프로젝트에서 bug가 발견되어, 이를 고쳐야 합니다. 하지만 master에서 작업하기에는 좀 껄끄럽죠. master는 안전성을 유지한 상태여야 하니까요. 이럴때, hotfix라는 branch를 하나 만들어서 작업을 진행하는거죠. 그 사이, master에는 완벽한 상태의 원본이 유지될거고, 저는 hotfix를 통해 버그를 수정할 수 있습니다. 그리고 작업이 끝나고나면 master로 merge를 하거나, 해당 커밋만 체리픽 할 수 있죠.

 

2. 제가 이런 작업을 진행하는 사이, 누군가는 서브기능을 추가하고 있을 수 있습니다. 단순하게 그 사람이 작업하는 branch를 sub라고 해볼게요. 그리고 그 사람은 작업을 마치고 나면 master와 sub를 merge하겠죠.

 

3. 그러는 사이, 누군가는 master에서 작업을 진행하고 있을수도 있죠. 열심히 commit, push를 하며 master의 코드를 고쳐나갈겁니다.

 

그리고 결국에 이런 1, 2, 3의 작업들을 통해 작성된 코드들은 master로 모이게 되겠죠.

 

 

그림으로 나타내 보면 이렇게 표현할 수 있습니다.

 

그림을 보시거나, git에 대한 설명을 여기저기서 보신 분들은 아시겠지만,

branch는 마스터로 부터 뻗어져 나온 가지입니다. 또 마찬가지로 master 또한 가지입니다. 가지보다는 기둥에 가깝겠지만요. master 라는 기둥(또는 가지, branch)로 부터 가지(branch)를 뻗어서 작업을 진행하다가, 다시 master라는 기둥(branch)으로 merge를 하는 것이죠. 가지는 한두개가 아닐 수 있고, 각각이 가지에서 작업하는 사람은 1명 이상이겠지요. 

 

그리고 각각의 가지 안에서는 commit, push, pull이라는 작업들이 계속해서 일어날 것이고, 

이런 작업들이 진행되는 동안, 파일들은 unstage, unmodified, modified, stage 상태를 왔다갔다 하겠죠.

 

 

Posted by 셋부터넷
,

출처: https://zamezzz.tistory.com/310 [배워가는블로거]

 

 

너무 많은 데이터 행을 처리할 때는 너무 느리고 모든 데이터를 다루기가 힘듭니다.

 

이를 해결하기 위해서 제공해주는 방법이 바로 server-side processing입니다.

 

 Server-side processing paramter

 

server-side processing은 데이터를 그리기 위해 javascript에서 서버측으로 ajax 요청을 합니다.

 

서버에서는 이 ajax요청을 받아 해당하는 데이터만 다시 리턴해주게 됩니다.

 

그럼 먼저 서버로 보내는 파라미터 종류를 살펴보겠습니다.

 

- draw

  count. ajax요청에 의해 그려질 때 dataTable이 순차적으로 그려지는 것을 보장하기 위해 사용
- start
  페이징 첫번째 레코드 값
- length
  현재 페이지에 그려질 레코드 수
- search[value]
  전체 테이블 데이터 검색을 위한 변수 값
- search[regex]
  전체 테이블 데이터 검색을 정규 표현식으로 처리해야할 경우 사용 디퐅르 false
- order[i][column]
  ordering을 적용해야하는 컬럼
- order[i][dir]
  ordering 방향 (asc or desc)
- column[i][data]
  i번째 컬럼의 데이터 값
- column[i][name]
  i번째 컬럼명
- column[i][searchable]
  i번째 컬럼이 검색이 가능하게 할 것인지 플래그 (t/f)
- column[i][orderable]
  i번째 컬럼이 ordering이 가능하게 할것인지플래그 (t/f)
- column[i][search][value]
  i번째 컬럼의 검색을 위한 변수 값
- column[i][search][regex]
  i번째 컬럼의 검색을 정규 표현식으로 처리할 경우 사용 (false)

 

다음은 리턴되는 파라미터입니다.

- draw
  요청하는 draw와 같은 의미입니다. count
- recordsTotal
  필터링 전 전체 레코드 수
- recordsFiltered
  필터링 후 전체 레코드 수
- data
  테이블에 그릴 데이터 (array)
- error
  error 발생 시 표시할 메시지 (optional)

 

 Server-side processing example

 

이제 실제 사용방법에 대해 예제를 보겠습니다.

 

먼저 html 코드입니다. 별도 데이터를 가져올 필요가 없어 매우 단순해졌습니다.

 

<tbody>부분이 사라졌습니다.

<table id="exampleTable" class="table table-bordered">

  <thead>

    <tr>

      <th>Seq</th>

      <th>Name</th>

      <th>Age</th>

      <th>Date</th>

    </tr>

  </thead>

</table>

 

다음은 js코드입니다. 몇 개의 옵션이 추가되었지만, 그래도 매우 간단합니다.

 

serverside 옵션과 processing 옵션이 추가되었습니다.

$("#exampleTable").DataTable({

    "serverSide": true,
    "processing": true,
    "ajax": {
        "url": "/example",
        "type": "POST",
        "dataSrc": function(res) {
            var data = res.data;
            return data;
        }
    },
    "columns" : [
        {"data": "seq"},
        {"data": "name"},
        {"data": "age"},
        {"data": "date"},
    ]

});

 

필요한 option을 사용했고, "/example" 로 ajax 요청을 하여 dataSrc를 받아옵니다. 

 

그리고 이를 columns으로 넣는 간단한 코드입니다.

 

이제 server 코드를 보겠습니다. 먼저 리턴 데이터를 위한 dto를 구성하겠습니다.

 

return paramters와 같은 모양으로 구현하면 됩니다.

@Data
public class DataTableDto {
    private int draw;
    private int recordsTotal;
    private int recordsFiltered;

    private List data;

    public List getData(){
        if(CollectionUtils.isEmpty(data)){
            data = new ArrayList();
        }
        return data;
    }

}

 

dto를 생성하였으면 이를 이용해 이제 service 로직은 구현해야 합니다.

 

jpa를 사용하는걸로 생각하여 간단하게 구현한 서비스 코드입니다.

@PostMapping(value = "/example")
@ResponseBody
public DataTableDto example(DataTableDto dto, @RequestBody MultiValueMap<String, String> formData){
    int draw = Integer.parseInt(formData.get("draw").get(0));
    int start = Integer.parseInt(formData.get("start").get(0));
    int length = Integer.parseInt(formData.get("length").get(0));

    int total = (int)exampleRepository.count();
    List data = exampleRepository.findData(start, length);

    dto.setDraw(draw);
    dto.setRecordsFiltered(total);
    dto.setRecordsTotal(total);
    dto.setData(data);

    return dto;
}

 

request parameter인 formData는 위에서 설명한 ajax 요청 시 서버로 보내는 파라미터 입니다.

 

여기서 필요한 draw, start, length만 꺼내어 사용했습니다.

 

그리고 DB에서 데이터를 조회하였고, 이를 dto로 다시 조립하여 리턴해줍니다.

 

이를 실행시키면 아래와 같은 테이블이 완성됩니다.

 

이렇게 하면 dataTables의 server-side processing 구현이 완료되었습니다.

 

동적으로 필요한 데이터만 가져와 그려주기 때문에 좋은 성능을 가집니다.

 

하지만 search를 위해서는 추가 구현을 해주어야 합니다. 기본 search는 현재 데이터만을

 

대상으로 제공하기 때문입니다.

 

 

 Server-side processing search

 

search를 위해서는 추가로 몇 개의 파라미터를 더 사용해야 합니다.

 

위의 파라미터에서 살펴보았던 search[value] 를 사용하면 전체 검색이 가능합니다.

 

하지만 column별 검색을 제공하고 싶다면 아래 2개의 파라미터를 사용해야 합니다.

- column[i][searchable] 
- column[i][search][value] 

 

그렇다면 검색을 위해 사용되는 주요 파라미터는 총 5개입니다.

 

draw, start, length, column[i][searchable], column[i][search][value]

 

이 5개를 이용하여 검색예제를 구현해보겠습니다.

 

먼저 검색창 부터 만들어야합니다. 기존 검색창은 따로 컬럼이 구분되어 있지 않아요.

 

그래서 먼저 기본 검색창에 hidden 옵션을 주어 숨기고, 간단한 검색창을 만들었습니다.

 

검색창 hidden 옵션은 이렇게 하시면 됩니다. $("#exampleTable_filter").attr("hidden", "hidden");

 

그리고 커스텀한 검색창은 기호에 맞게 구현하시면 됩니다. 저는 select box를 이용하였습니다.

 

column[i]의 순서대로 0은 seq, 1은 name, 2는 age, 3은 date로 설정하였습니다.

그리고 위 search 버튼의 클릭이벤트는 아래와 같이 작성합니다.

$("#searchBtn").click(function () {
    var numCols = table.columns().nodes().length;
    for(var i=0; i<numCols; i++) { table.column(i).search(''); }

    var searchType = $("#searchType").val();
    var searchValue = $("#searchValue").val();

    table.column(searchType).search(searchValue).draw();
})

 

처음 2줄은 table을 init하는 과정입니다. 기존 검색으로 table의 파라미터에 설정된 다른

 

검색 파라미터 값을 초기화시키는 작업입니다.

 

그리고 dataTable의 search() API를 이용하여 searchType과 searchValue를 서버로 전달합니다.

 

예를 들어 name을 'AAA'로 search를 실행하고 서버에서 전달받은 formData를 log로 찍어보면

 

아래와 같은 모습입니다. 

{
draw=[1], 
columns[0][data]=[seq], columns[0][name]=[], columns[0][searchable]=[true], columns[0][orderable]=[false], columns[0][search][value]=[], columns[0][search][regex]=[false], 
columns[1][data]=[name], columns[1][name]=[], columns[1][searchable]=[true], columns[1][orderable]=[false], columns[1][search][value]=[AAA], columns[1][search][regex]=[false], 
columns[2][data]=[age], columns[2][name]=[], columns[2][searchable]=[true], columns[2][orderable]=[false], columns[2][search][value]=[], columns[2][search][regex]=[false], 
columns[3][data]=[date], columns[3][name]=[], columns[3][searchable]=[true], columns[3][orderable]=[false], columns[3][search][value]=[], columns[3][search][regex]=[false], 
start=[0], length=[10], search[value]=[], search[regex]=[false]
}

 

중간의 columns[1][search][value]=[AAA]가 보이시나요 ?

 

저희가 검색을 위해 사용해야 할 파라미터입니다.

 

String nameParam = formData.get("columns[1][search][value]").get(0);

 

이러한 방식으로 파싱해서 사용하면 됩니다. 그리고 이 변수를 통해 DB셀렉트를 하고

 

필요한 데이터를 리턴해주면 됩니다. 

int total;
List data;


if(nameParam.lenght() > 0) {
    total = (int)exampleRepository.countByName(nameParam);
    data = exampleRepository.findDataByName(nameParam, start, length);
} else {
    total = (int)exampleRepository.count();
    data = exampleRepository.findData(start, length);
}

 

위의 코드를 실행하고 'AAA'를 검색해보면 아래와 같은 결과를 얻을 수 있습니다.

 

 

그리고 필요에 따라서는 multiple search를 할 수 있고 Like 검색 또한 할 수 있습니다.

 

쿼리만 조금 복잡할 뿐 변수를 받아 쿼리를 작성하고 가공한 후 해당 데이터를 리턴해주면

 

되는 모두 동일한 로직입니다. 

 

그럼 dataTables의 server-side processing과 search 에 대한 정리를 마치겠습니다.

 

감사합니다.




'Template > dataTables.js' 카테고리의 다른 글

dataTables.js 사용법 및 예제  (0) 2020.10.06
Posted by 셋부터넷
,

출처 : ponyozzang.tistory.com/220

 

DataTables는 HTML의 <table>을 데이터 그리드 형식으로 사용하기 위한 라이브러리입니다.

장점은 다음과 같습니다.

○표 <table>에 다음과 같은 기능을 빠르게 구현·추가할 수 있다.

・표시 건수 제어 기능

・페이징 기능

・정렬 기능

・필터 기능

・스크롤 기능

○서버에서 테이터(JSON)를 받아 표시할 수 있다. 

○표 디자인이 깔끔하다.(Bootstrap 디자인에도 맞출 수 있음)

라이센스는 MIT이고, 사용하기 위해서는 jQuery가 필요합니다.

 

DataTables의 기본적인 사용방법을 설명하겠습니다.

 

설명 환경

DataTables 사용하기 위해서는 최소한으로 DataTables JS 파일과 CSS 파일, jQuery가 필요합니다.

동작 확인을 바로 확인할 수 있도록 HTML을 사용하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
    <script>
        jQuery(function($){
            $("#foo-table").DataTable();
        });
    </script>
    <title></title>
</head>
<body>
    <table id="foo-table" class="table table-bordered">
        <thead>
            <tr><th>No</th><th>지역선택</th></tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>서울</td></tr>
            <tr><td>2</td><td>경기도</td></tr>
            <tr><td>3</td><td>충청남도</td></tr>
            <tr><td>4</td><td>충청북도</td></tr>
            <tr><td>5</td><td>전라남도</td></tr>
            <tr><td>6</td><td>전라북도</td></tr>
            <tr><td>7</td><td>경상남도</td></tr>
            <tr><td>8</td><td>경상북도</td></tr>
            <tr><td>9</td><td>강원도</td></tr>
            <tr><td>10</td><td>제주도</td></tr>
            <tr><td>99</td><td>해외</td></tr>
        </tbody>
    </table>
</body>
</html>
cs

 

<table>에 DataTables 적용하기

예를 들어 위 샘플처럼 테이블에 id="foo-table" 이라고 아이디를 지정한 경우에는 다음과 같은 코드로 DataTables을 적용할 수 있습니다.

1
2
3
4
5
<script type="text/javascript">
jQuery(function($){ 
    $("#foo-table").DataTable(); 
}); 
</script>
cs

위 jQuery는 </body> 앞에 넣어주면 됩니다. 

 

jQuery작성 방법은 

1
2
3
jQuery(function($){}) 
$(function((){})
$(document).ready(function(){})
cs

어느것을 사용해도 상관없습니다.

 

주의할 점은 .dataTable() .DataTable()을 주의해야 합니다.

대문자 또는 소문자로 작성해도 동작은 하지만 소문자 .dataTable() 로 작성한 경우에는 반환값이 jQuery 오브젝트이고, 대문자 .DataTable()로 작성한 경우에는 반환값이 DataTable의 API 오브젝트가 됩니다.

.dataTable()의 경우 .dataTable().api()를 사용하여 API 오브젝트를 취득할 수 있습니다.

 

DataTables 기능 및 표시 기능 숨기기

DataTables은 기본적으로 표시 건수, 검색, 정렬, 정보 표시, 페이징 기능이 추가되어 표시됩니다.

번호

 항목

 내용

 1

 표시 건수

 10, 25, 50, 100건 단위로 표시 가능

 2

 검색

 출력된 표에서 검색 가능

 3

 정렬

 클릭하면 열을 오름 차순, 내림 차순으로 정렬

 4

 정보 표시

 표시 건수 등 여러 정보를 표시

 5

 페이징

 1페이지, 2페이지... 등 페이지를 나눠서 표시

 

기능이 필요하지 않는 경우에는 기능을 숨길 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
$("#foo-table").DataTable({
    // 표시 건수기능 숨기기
    lengthChange: false,
    // 검색 기능 숨기기
    searching: false,
    // 정렬 기능 숨기기
    ordering: false,
    // 정보 표시 숨기기
    info: false,
    // 페이징 기능 숨기기
    paging: false
});
cs

 

초기 표시시 정렬하기

DataTables은 초기 표시할 때에도 정렬을 시킬 수 있습니다.

1
2
3
4
5
$("#foo-table").DataTable({
    // 2번째 항목을 오름 차순 
    // order : [ [ 열 번호, 정렬 순서 ], ... ]
    order: [ [ 1, "asc" ] ]
});
cs

 

order는 [ [ 열 번호, 정렬 순서 ], ... ] 형식으로 설정합니다.

・열 번호는 0부터 시작합니다. 0은 1번째 항목, 1은 2번째 항목입니다.

・정렬 순서는 오름 차순 = "asc", 내림 차순 = "desc"로 설정합니다.

・복수의 항목으로 정렬하고 싶은 경우에는 다음과 같이 설정합니다.

 

예문) 1번째 항목은 오름 차순 + 2번째 항목은 내림 차순

1
order:[ [ 0, "asc" ], [ 1, "desc"] ]
cs

 

화면을 초기 표시할 때 정렬을 하고 싶지 않은 경우에는 다음과 같이 설정합니다.

1
2
3
4
$("#foo-table").DataTable({
    // 초기 표시에 경우 정렬 안함
    order: []
});
cs

 

스크롤바 설정(scrollX, scrollY)

표가 화면보다 큰 경우 스크롤바를 추가로 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
$("#foo-table").DataTable({
    // 가로 스크롤바를 표시
    // 설정 값은 true 또는 false
    scrollX: true,
 
    // 세로 스크롤바를 표시
    // 설정 값은 px단위
    scrollY: 200
});
cs

기본 테이블 형식에 스크롤바를 추가하는 작업은 매우 번거롭습니다.

테이블에 스크롤바를 만들어야 할 때 DataTables를 사용하는 것은 간단한 방법 중 하나입니다.

 

DataTables의 넓이 설정

DataTables에서 직접 넓이를 조절할 수 있습니다.

조절할 때에는 columnDefs 사용하여 넓이를 설정합니다.

1
2
3
4
5
6
7
8
9
10
11
$("#foo-table").DataTable({
    // 스크롤바 설정
    scrollX: true,
    scrollY: 200,
 
    // 열 넓이 설정
    columnDefs: [
        // 2번째 항목 넓이를 100px로 설정
        { targets: 1, width: 100 }
    ]
});
cs

targets 설정 방법

종류

 내용

 예

 숫자

 정해진 번호를 설정

 targets: 0

 배열

 복수 사용시 배열 이용

 targets: [0, 1, 2]

 문자열

 설정한 클래스명 설정

 targets: "name-column"

 

컬럼 항목 숨기기 (columnDefs visible)

표에는 표시할 필요는 없지만 값을 저장해둬야 하는 항목이 있는 경우가 있습니다.

또는 기존에 표시되고 있는 항목을 비표시 해야 하는 경우도 있습니다.

이러한 경우 DataTables 설정으로 원하는 열만을 숨길 수 있습니다.

 

열을 숨길 때도 columnDefs 사용하여 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#foo-table").DataTable({
    // 스크롤바
    scrollX: true,
    scrollY: 200,
 
    // 열 설정
    columnDefs: [
        // 1번재 항목 열을 숨김
        { targets: 0, visible: false },
    
        // 2번째 항목의 넓이를 100px로 설정
        { targets: 1, width: 100 }
    ]
});
cs

 

표시 건수 설정(lengthMenu/displayLength)

한 페이지에 보여줄 데이터 건수를 정하는 표시 건수 부분도 변경할 수 있습니다.

표시 건수 단위는 lengthMenu로, 표시할 때 보여줄 기본값은 displayLength로 설정할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#foo-table").DataTable({
    // 표시 건수를 10건 단위로 설정
    lengthMenu: [ 10, 20, 30, 40, 50 ],
 
    // 기본 표시 건수를 50건으로 설정
    displayLength: 50, 
    scrollX: true,
    scrollY: 200,
    columnDefs: [
        { targets: 0, visible: false },
        { targets: 1, width: 100 }
    ]
});
cs

 

페이지 수, 표시 건수, 정렬 상태를 보존하기(stateSave)

일람 페이지에서 다른 페이지로 이동한 뒤, 다시 원래의 일람 페이지로 돌아오는 경우에 보고 있었던 페이지나 정렬 상태, 표시 건수들을 저장해뒀다가 다시 보여줄 수 있도록 해줍니다.

1
2
3
4
5
6
7
8
9
10
$("#foo-table").DataTable({
    // 현재 상태를 보존
    stateSave: true,
    scrollX: true,
    scrollY: 200,
    columnDefs: [
        { targets: 0, visible: false },
        { targets: 1, width: 100 }
    ]
});
cs

 

JSON 파일 데이터를 데이터 그리드에 표시하기

아래 샘플과 같은 data.json 이라는 JSON 파일이 있다고 가정하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[
 
    { "id": 1, "name": "서울" },
 
    { "id": 2, "name": "경기도" },
 
    { "id": 3, "name": "충청남도" },
 
    { "id": 4, "name": "충청북도" },
 
    { "id": 5, "name": "전라남도" },
 
    { "id": 6, "name": "전라북도" },
 
    { "id": 7, "name": "경상남도" },
 
    { "id": 8, "name": "경상북도" },
 
    { "id": 9, "name": "강원도" },
 
    { "id": 10, "name": "제주도" },
 
    { "id": 99, "name": "해외" }
 
]
cs

 

JavaScript에서는 아래 샘플과 같이 JSON 데이터를 데이터 그리드에 표시할 수 있습니다.

1
2
3
4
5
6
7
$("#foo-table").DataTable({
    ajax: { url: "data.json", dataSrc: '' },
            columns: [
                { data: "id" },
                { data: "name" }
            ]
});
cs

 

HTML에서는 표의 열은 헤더(<thead>)만 작성하고, 열의 개수는 JavaScript의 columns에서 설정한 개수와 똑같이 작성해줘야 합니다.

1
2
3
4
5
<table id="foo-table" class="table table-bordered">
    <thead>
        <tr><th>No</th><th>지역선택</th></tr>
    </thead>
</table>
cs

 

columnDefs를 사용한 경우에는 아래와 같이 작성하면 됩니다.

(targets 과 data 를 지정)

1
2
3
4
5
6
7
$("#foo-table").DataTable({
    ajax: { url: "data.json", dataSrc: '' },
            columns: [
            { targets: 0, data: "id" },
            { targets: 1, data: "name" }
    ]
});
cs

 

DataTables의 기본적인 사용방법을 알아봤습니다.

 

 

 

 

'Template > dataTables.js' 카테고리의 다른 글

dataTables.js Server-side processing  (0) 2020.10.06
Posted by 셋부터넷
,