数据表中的jQuery选项卡不起作用

Question

我正在为我的应用程序实现数据表。 我将数据表用于扩展行。 我想在每一行中实现选项卡。我通过脚本添加选项卡。 但这是行不通的。

我的代码是

     <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>

我的代码有什么问题吗？

请帮助，

谢谢

Answer 1

好，我知道了。 问题是jquery问题在选择元素时有问题，因为数据具有相似的ID。

那么您需要为此使用服务器端语言。 您必须使用服务器端语言创建选项卡的DOM，这样它才能创建动态ID，并且不会彼此冲突。