Search jQuery

jQuery Forum

EXAMPLE : Tables within tabs

in Getting Started • 11 years ago

Have multiple tables inside tabs :

step 1: Import and link all files(JS & CSS):

<style type="text/css" title="currentStyle">
step 1 : 
            @import "../../media/css/demo_page.css";
            @import "../../media/css/demo_table.css";
        </style>
     
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
 
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
        <link rel="stylesheet" href="../../media/css/jquery.ui.all.css">
        <script src="../../media/js/jquery.ui.core.js"></script>
        <script src="../../media/js/jquery.ui.widget.js"></script>
        <script src="../../media/js/jquery.ui.tabs.js"></script>

step 2 :

$(document).ready(function() { /* Initialise the DataTable */
    var oTable1 = $('#example1').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
    var oTable2 = $('#example2').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
    var oTable3 = $('#example3').dataTable({"oLanguage": {"sSearch": "Search all columns:"} });
    /* Add a select menu for each TH element in the table footer */
 
    
    $("#example1 thead tr").clone().prependTo($("#example1 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable1.fnGetColumnData(i));
 
        $('select', this).change(function() {oTable1.fnFilter($(this).val(), i);  }); } );
         
         
        $("#example2 thead tr").clone().prependTo($("#example2 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable2.fnGetColumnData(i));
 
        $('select', this).change(function() {oTable2.fnFilter($(this).val(), i);  }); } );
         
        $("#example3 thead tr").clone().prependTo($("#example3 thead")).find("th").each(function(i) {this.innerHTML = fnCreateSelect(oTable3.fnGetColumnData(i));
 
        $('select', this).change(function() {oTable3.fnFilter($(this).val(), i);  }); } );
         
         
         
         
}

step 3 : Make three datatables with unique ids (same ids given above)

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Table1</a></li>
        <li><a href="#tabs-2">Table2</a></li>
        <li><a href="#tabs-3">Table3</a></li>
    </ul>
    <div id="tabs-1">
        <p><strong>Click this tab again to close the content pane.</strong></p>
 
    <div id="demo1">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
 
<thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                </thead>
//.....................tbody
//.....................tfoot
//........................table
</div>
</div>
 
 
<div id="tabs-2">
        <p><strong>Click this tab again to close the content pane.</strong></p>
 
    <div id="demo2">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
 
<thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                </thead>
//.....................tbody
//.....................tfoot
//........................table
</div>
</div>
 
<div id="tabs-3">
        <p><strong>Click this tab again to close the content pane.</strong></p>
 
    <div id="demo3">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example3">
 
<thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                </thead>
//.....................tbody
//.....................tfoot
//........................table
</div>
</div>
 
</div>

Replies(4)

Kevin B

Re: Tables within tabs

11 years ago

is this supposed to be a question?

If you are having display problems with the dataTables, make sure you are initializing the datatables before you initialize the tabs ( they may require being visible at initialization )

-- Kevin

joyquery