느리게 걷기

datatables.js 플러그인 사용시 rowspan 하기(dataTables.rowsGroup.js) 본문

jQuery

datatables.js 플러그인 사용시 rowspan 하기(dataTables.rowsGroup.js)

★버드나무★ 2015. 12. 17. 10:57

datatables.net 에서 datatables.js 를 사용하는 경우...
헤더(th)의 rowspan 은 기본적으로 제공해주지만,
td의 rowspan을 위해서는 추가적인 plugin을 사용해야 한다.

dataTables.rowsGroup.js


<참고 url>

https://datatables.net/forums/discussion/29319/new-rowsgroup-plugin-merge-cells-vertically-rowspan

http://live.datatables.net/bodanole/1/edit


<예시>

var data = [
['11111', '010-1111-1111', '33333', '44444', '55555'],
['11111', '02-2222-2222', '33333', '44444', '55555'],
['aaa', '010-3333-3333', 'bbb', 'ccc', 'ddd'],
['aaa', '02-4444-4444', 'bbb', 'ccc', 'ddd'],
['ㄱㄱㄱ', '010-5555-5555', 'ㅎㅎㅎ', 'ㄹㄹㄹ', 'ㅇㅇㅇ'],
['ㄱㄱㄱ', '02-5555-5555', 'ㅎㅎㅎ', 'ㄹㄹㄹ', 'ㅇㅇㅇ']
];
var table = $('#example').DataTable({
columns: [
{
name: 'rowspan',
title: 'First group',
},
{
title: 'Second group',
},
{
name: 'rowspan',
title: 'Third group',
},
{
name: 'rowspan',
title: 'Forth ungrouped',
},
{
name: 'rowspan',
title: 'Fifth ungrouped',
},
],
data: data,
rowsGroup: [
'rowspan:name',
[0,2,3,4]
 ]
} );

위 예제에서 보면,
columns 옵션에서 rowspan 하고 싶은 영역(셀)에다가 name 값으로 특정이름을 지정해준다
(여기서는 'rowspan' 이라 지정하였다)
그리고 rowsGroup 이라는 옵션을 위와 같이 지정해주면 된다.
rowsGroup 의 첫번째 값은 rowspan 할 곳의 이름이고,
두번째 값은 rowspan 할 곳을 배열로 지정해준 것이다.
테스트해본 결과 두번째 값은 넘겨주지 않아도 된다.

name 값이 지정된 셀의 데이터가 같은 경우 merge 되며,
name 값을 지정해주더라도 데이터 값이 다르면 merge 되지 않는다.


Comments