2014-10-16 2 views
0

그래서 datatables를 사용하려는 각 "행"이 같다고 같은 (또는 적어도이 일반적인 구조가) : 참고로사용 datatables

enter image description here

여기의를 HTML을 사용하여 만들었습니다.

<table border="1" cellspacing="1" cellpadding="1"> 
<tr> 
<td colspan="2">joe bob</td> 
</tr><tr> 
<td rowspan="4">pic</td> 
</tr><tr> 
<td>DOB: 1/1/1970</td> 
</tr><tr> 
<td>Gender: M</td> 
</tr><tr> 
<td>Phone: 111-111-1111</td> 
</tr> 
</table> 

어쨌든 어떻게 데이터 테이블로이 작업을 수행 할 수 있습니까? datatables는 하나의 <tr>을 반환하지만, 위의 코드를 생성하는 데 사용 된 HTML은 <tr>의 전체 묶음을 가지고 있습니다.

나는이 사이트의 다른 테이블과의 일관된 모양과 느낌을 위해 페이지 테이블을 검색하고 검색하는 데 datatables를 사용하고 싶습니다.

답변

1

당신은 (테스트되지 않은) 당신의 DataTable을 초기화 코드에서 이런 일을 할 수있는 :

'aoColumns': [ 
    'mRender': function (data, type, full) { 
    return '<table border=\'1\' cellspacing=\'1\' cellpadding=\'1\'>' + 
    '<tr>' + 
    '<td colspan=\'2\'>' + full[0] +'</td>' + 
    '</tr><tr>' + 
    '<td rowspan=\'4\'>' + full[1] +'</td>' + 
    '</tr><tr>' + 
    '<td>DOB: ' + full[2] +'</td>' + 
    '</tr><tr>' + 
    '<td>Gender: ' + full[3] +'</td>' + 
    '</tr><tr>' + 
    '<td>Phone: ' + full[4] +'</td>' + 
    </tr>'; 
    </table> 
    } 

이 방법은 명시 적으로 행 출력을 정의하고 있습니다. 이렇게하면 각 datatable 행에 '내부'테이블이 생성되어 원하는대로 표시되지 않을 수 있습니다. 테이블 대신 css를 사용하여 내부 레이아웃을 만들 수도 있지만 아이디어는 동일합니다. jsRender와 같은 템플릿 시스템을 사용하여 조금 더 깨끗하게 만들 수도 있습니다.