Question

我正在为我的应用程序实现数据表。我使用数据表扩展行。在每行内部我想实现tabs.I我通过脚本添加选项卡。但它没有用。

我的代码是，

     <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并且不会相互冲突。

数据表中的JQuery选项卡无法正常工作

1 个答案: