Problema com Datatable

Bom dia galera,

Estou desenvolvendo uma aplicação, e encontrei um problema...

Eu queria fazer um esquema que, a partir de uma listagem, no click da linha, exibisse uma linha em baixo com os detalhes.

Ok, essa parte funciona.

Porém eu fui paginar essa table com o datatable, e ele não reconhece essa segunda de detalhes, o que faz com que ele nao consiga ficar montado corretamente.

Segue o código da minha página:

<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="/css/lib/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/demo_page.css" type="text/css" />
<link rel="stylesheet" href="/css/demo_table.css" type="text/css" />

<script >

$(document).ready(function(){
    $('#tb-1 td').click(function(){
    	$(this).parent().next('.tr-mensagem').toggleClass('hide');
    });
});
</script>

<script>
jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
	return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
	return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};
	
$(document).ready(function() {
	$('.datatable').dataTable()
});
</script>


<table id="tb-1" class="table table-striped datatable" style="width:100%;">
	<thead>
        <tr>
            <th>Nome</th>
            <th>E-mail</th>
            <th>Regiões</th>                                       
            <th>Mensagem</th>
            <th>Data</th>
        </tr>
    </thead>
	<tbody>
		#foreach($invite in $sentInvites)
    	<tr>
            <td><strong>#if($invite.guestName.length() gt 20)<label title="$invite.guestName">$invite.guestName.substring(0,20)...</label>
						#else
							$invite.guestName
						#end
			</strong></td>
            <td>#if($invite.guestEmail.length() gt 20)<label title="$invite.guestEmail">$invite.guestEmail.substring(0,20)...</label>
				#else
					$invite.guestEmail
				#end
			</td>                                        
            <td>#if($invite.operationRegion.length() gt 25)<label title="$invite.operationRegion">$invite.operationRegion.substring(0,25)...</label>
				#else
					$invite.operationRegion
				#end
			</td>
            <td>#if($invite.message.length() gt 30)<label title="$invite.message">$invite.message.substring(0,30)...</label>
				#else
					$invite.message
				#end
			</td>
            <td>$date.format("dd/MM/yyyy",$invite.invitationDate)</td>										
        </tr>                          
        <tr class="tr-mensagem hide">
			<td colspan="5">
				<div>Para: $invite.guestName <span>< $invite.guestEmail ></span></div>
				<div style="margin-bottom:20px;margin-left:150px" class="txt-mensagem">$invite.message</div>
				<div style="margin-left:150px">
					<div style="float:left;">
						$invite.user.name - CRECI: $invite.user.userSalespersonInfo.creci
					</div>
				</div> 
			</td>
		</tr>     
		#end
    </tbody>
</table>

Se alguém conseguir me ajudar.

Obrigado.

Atenciosamente,

Topicos relacionados