Displaying a DataTable Using Twitter Bootstrap, JQuery,& VB

Question

I'm trying to display a datatable within a Twitter bootstrap layout. When I run the same code, calling the same functions, it returns a datatable and displays it on the page as I'd expect. However, with I bring the same code into the TwitterBootstrap it doesn't display it. Is there something different in the Twitterbootstrap that would stop it from displaying a table? Here's my code:

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

Then on the page which contains the call. The pie chart in the first half of the code is being displayed.

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

When the page is executed, this is what shows up in the HTML portion:

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

Here's the javascript portion:

$('#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"}
    ]
});

So, the VB is executing, and executing correctly as far as I know? When I place the code into a jsBin example my javascript displays? So the only conclusion I can make is something in bootstrap is stopping it? Any ideas?

Answer 1

I do not think that your issue is stemming from the use of bootstrap and datatables. I made a jsbin to test it out and was able to get your code, simplified because it did not have asp, to execute without issues.

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

Below is the code I used.

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

Also just for your information I have successfully used Knockout to hide and display datatables if you are looking for that functionality.