Tabs in child rows

shivaselvadurai

Hello,

I'm trying to add tabs inside the child row, (source : http://infra.clarin.eu/content/libs/DataTables-1.10.6/examples/api/row_details.html), I'm getting the tabs but the css is not getting applied to it, so it looks like hyperlink side by side. How can I resolve this issue.

-Shiva S

tangerine

You are more likely to get some advice if you show your code.

shivaselvadurai

Following is the code written in format function of http://infra.clarin.eu/content/libs/DataTables-1.10.6/examples/api/row_details.html),

 function format ( d ) {
    var val = '';
    val += '<div class="container">';
    val += '<ul class="nav nav-tabs">';
    val += '<li class="active"><a data-toggle="tab" href="#home">Home</a></li>';
    val += '<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>';
    val += '<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>';
    val += '<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>';
    val += '</ul>';
    val += '<div class="tab-content">';
    val += '<div id="home" class="tab-pane fade in active">';
    val += '<h3>HOME</h3>';
    val += '</div>';
    val += '<div id="menu1" class="tab-pane fade">';
    val += '<h3>Menu 1</h3>';
    val += '</div>';
    val += '<div id="menu2" class="tab-pane fade">';
    val += '<h3>Menu 2</h3>';
    val += '</div>';
    val += '<div id="menu3" class="tab-pane fade">';
    val += '<h3>Menu 3</h3>';
    val += '</div>';
    val += '</div>';
    val += '</div>';
    return val;
 }

kthorngren

Have you loading Bootstrap?

I have your example working in this test case:
http://live.datatables.net/xuvujixo/1/edit

Kevin

shivaselvadurai

Thanks, its working fine. I was using https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css instead of https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.16/datatables.min.css. But it now created issues with my pagination, which I'm trying to fix :-).

instead