Question

i am implementing datatable for my application. I use datatable with expanding rows. Inside each row i want to implement tabs.I am adding tabs via script. But it is not working.

My code is,

     <script type="text/javascript" charset="utf-8">        
        $(function() {
            $( "#tabs" ).tabs();
        });


        function fnFormatDetails ( oTable, nTr )
        {
            var aData = oTable.fnGetData( nTr );
            var sOut = '<div class="demo">';
            sOut += '<div id="tabs" style="padding-left:10px; background-color:white !important; border:0px !important;">';
            sOut += '<ui>';
            sOut += '<li><a href="#tabs-1">Details</a></li>';
            sOut += '<li><a href="#tabs-2">History</a></li>';
            sOut += '</ui>';
            sOut += '<div id="tabs-1">';
            sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Rendering engine </div><div style="color:#292828; width: 60%; float: left;">:&nbsp;'+aData[1]+' '+aData[4]+' </div></p>';
            sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Link to source</div><div style="color:#292828; width: 60%; float: left;">:&nbsp;Could provide a link here</div></p>';
            sOut += '<p><div style="color:#8e8d8d; width: 40%; float: left;">Extra info</div><div style="color:#292828; width: 60%; float: left;">:&nbsp;And any further details here</div>&nbsp;</p>';
            sOut += '</div>';
            sOut += '<div id="tabs-2">';
            sOut += '<p>Data in 2nd tab</p>';
            sOut += '</div>';
            sOut += '</div>';
            sOut += '</div>';

            return sOut;
        }           
        $(document).ready(function() {

             $("#dt_example tbody tr").click( function( e ) {
             var nTr = $(this).parents('tr')[0];
                if ( $(this).hasClass('row_selected') ) {
                    $(this).removeClass('row_selected');

                    $( 'img', this ).attr('src', 'datatable/images/details_open.png');                      

                    oTable.fnClose( nTr );


                }
                else {

                    $(this).addClass('row_selected');


                    $( 'img', this ).attr('src', 'datatable/images/details_close.png');

                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );

                }
            });

            var nCloneTh = document.createElement( 'th' );
            var nCloneTd = document.createElement( 'td' );
            nCloneTd.innerHTML = '<img src="datatable/images/details_open.png">';
            nCloneTd.className = "center";

            $('#example thead tr').each( function () {
                this.insertBefore( nCloneTh, this.childNodes[0] );
            } );

            $('#example tbody tr').each( function () {
                this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
            } );

            var oTable = $('#example').dataTable( {
                "bJQueryUI": true,
                "bSort": false,
                "sPaginationType": "full_numbers",
                "sDom": 'T<"clear">lfrtip'

            });

            $('#example tbody td').live('click', function () {
                var nTr = $(this).parents('tr')[0];


                if ( oTable.fnIsOpen(nTr) )
                {

                    $( 'img', this ).attr('src', 'datatable/images/details_open.png');                      

                    oTable.fnClose( nTr );
                }
                else
                {

                    $( 'img', this ).attr('src', 'datatable/images/details_close.png');

                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );

        });
    </script>

Is there anything wrong with my code?

Help please,

Thanks

Answer 1

ok i got it. the problem is the jquery problem has a problem on selecting the elements because the data have similar id’s.

well you need to use a server-side language for this. you must create the DOM of the tabs by using a server-side language so it will create dynamic id’s and will not conflict to each other.