0

Twitter ブートストラップ レイアウト内にデータテーブルを表示しようとしています。同じ関数を呼び出して同じコードを実行すると、データテーブルが返され、期待どおりにページに表示されます。ただし、同じコードを TwitterBootstrap に入れると、表示されません。Twitterbootstrap に、テーブルの表示を停止する何か別のものはありますか? これが私のコードです：

 $('#TableHere').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' )
    $('#example').dataTable( {
     <%= returnWeeklyTable() %>

次に、呼び出しを含むページで。コード前半の円グラフが表示されています。

<form id="form1" runat="server">
    <div class="container-fluid">
        <asp:DropDownList ID="SelectComponent" runat="server">
        </asp:DropDownList>
        <div class="row-fluid">
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <a href="#pieChart" class="block-heading" data-toggle="collapse">Browser Usage</a>
            <div id="pieChart" class="block-body collapse in">
                <div>
                    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="row-fluid">
                <a href="#bTable" class="block-heading" data-toggle="collapse">Browser User Agent Table</a>
                <div id="bTable" class="block-body collapse in">
                    <div id="TableHere" runat="server">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

ページが実行されると、HTML 部分に次のように表示されます。

<div id="TableHere">
    <table id="example" class="display" cellspacing="0" cellpadding="0" border="0"></table>
</div>

ここにJavaScriptの部分があります：

$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
    "aaData": [
        ['Internet Explorer', '8.0', '14038'],
        ['Andriod', '2.3.7', '20'],
        ['Safari', '4.1', '18'],
        ['BlackBerry Browser', 'Unknown', '16'],
        ['Safari', '4.0', '12'],
        ['Mobile Safari', '7.0', '10'],
        ['Chrome', '17.0', '6'],
        ['Firefox', '5.0', '4'],
        ['Firefox', '2.0', '2'],
        ['Opera', '12.10', '2']
    ],
    "aoColumns": [
        {"sTitle": "Browser Name"},
        {"sTitle": "Browser Version"},
        {"sTitle": "Total"}
    ]
});

それで、VBは実行されており、私の知る限り正しく実行されていますか? コードを jsBin の例に配置すると、javascript が表示されますか? だから私ができる唯一の結論は、ブートストラップの何かがそれを止めているということですか? 何か案は？

4

1 に答える 1

0

あなたの問題は、ブートストラップとデータテーブルの使用に起因しているとは思いません。私はそれをテストするためにjsbinを作成し、問題なく実行するために、aspがないために簡略化されたコードを取得することができました。

http://jsbin.com/elixor/1/edit

以下は私が使用したコードです。

<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://www.datatables.net/release-datatables/media/css/demo_table.css" rel="stylesheet" type="text/css">
<script src="http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready
    (
            function ()
            {
                $('#TableHere').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
                $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
                $('#example').dataTable({
                    "aaData": [
                        ['Internet Explorer', '8.0', '14038'],
                        ['Andriod', '2.3.7', '20'],
                        ['Safari', '4.1', '18'],
                        ['BlackBerry Browser', 'Unknown', '16'],
                        ['Safari', '4.0', '12'],
                        ['Mobile Safari', '7.0', '10'],
                        ['Chrome', '17.0', '6'],
                        ['Firefox', '5.0', '4'],
                        ['Firefox', '2.0', '2'],
                        ['Opera', '12.10', '2']
                    ],
                    "aoColumns": [
                        {"sTitle": "Browser Name"},
                        {"sTitle": "Browser Version"},
                        {"sTitle": "Total"}
                    ]
                });

            }
    );
</script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="row-fluid">
            <a href="#bTable" class="block-heading" data-toggle="collapse">Browser User Agent Table</a>
            <div id="bTable" class="block-body collapse in">
                <div id="TableHere">
                </div>
            </div>
        </div>
    </div>
</div>

また、参考までに、Knockoutを使用して、その機能を探している場合にデータテーブルを非表示および表示することに成功しました。

于 2012-12-10T14:19:20.590 に答える