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