Paging and search of one datatable appearing on multiple jquery tabs

jcg31

I have four jquery tabs, each containing a different datatable. For some reason that I can not identify, the paging and search from the third tab is showing up at the bottom of the first tab (see attached image). This portion of the datatable also appears correctly on the third tab as expected. Any help would be appreciated.

       <div id="tabs-1">
            <ul>
                <li><a id="lys" href="#unprocessedDiv" >Unprocessed</a></li>
                <li><a id="lys3" href="#processedDiv" >Processed</a></li>
                <li><a id="prpscts" href="#getprospects" >Prospects</a></li>
                <li><a id="lys2" href="#Leaderboard" >Leaderboard</a></li>
            </ul>

            <div id="unprocessedDiv">
                <table id="unprocessed" width="500" border="0">
                    <thead id="tblhead">
                        <tr>
                            <th class="dthead" scope="col">Advertiser</th>
                            <th class="dthead" scope="col">Account</th>
                            <th class="dthead"  scope="col">Location</th>
                            <th class="dthead"  scope="col">Rep</th>
                            <th class="dthead"  scope="col">Entered</th>
                            <th class="dthead"  scope="col">Ad No.</th>
                            <th class="dthead"  scope="col">Processed</th>
                        </tr> 
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>

            <div id="processedDiv">
                <table id="processed" width="500" border="0">
                    <thead id="tblhead">
                        <tr>
                            <th class="dthead" scope="col">Advertiser</th>
                            <th class="dthead" scope="col">Account</th>
                            <th class="dthead"  scope="col">Location</th>
                            <th class="dthead"  scope="col">Rep</th>
                            <th class="dthead"  scope="col">Entered</th>
                            <th class="dthead"  scope="col">Ad No.</th>
                            <th class="dthead"  scope="col">Processed</th>
                        </tr> 
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>


            <div id="Prospects" class="hideit">
                <table id="getprospects" width="500" border="0">
                    <thead id="tblhead2">
                        <tr>
                            <th>Rep</th>
                            <th>Prospect</th>
                            <th>Phone</th>
                            <th>SubCategory</th>
                            <th>Rank</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody2"></tbody>
                </table>
            </div>

            <div id="Leaderboard">
                <select name ="leaderboardSelect" class= "forminput11 clearable  c1" id ="leaderboardSelect"  ></select>
                <input type="button" name="getLeader" id="getLeader" value="Get Leader">
                <table id="getleader" width="500" border="0">
                    <thead>
                        <tr>
                            <th width="75px" align="left">Property</th>
                            <th width="75px"  align="left">Sales Rep</th>
                            <th width="75px"  align="left">Sales</th>

                        </tr>
                    </thead>
                    <tbody style="
                           background-color: white;
                           font-size: 12px;
                           text-align: left;
                           " id="tblbody3"></tbody>
                </table>
            </div>

allan

Looks like the href for the third tab doesn't correspond to the div container for the third tab.

Allan

allan

Congrats on posting thread #40'000 btw .