My table data disappear when I click on different column's header's arrorw

Hi, I'm using the jQuery plugin tablesorter, http://tablesorter.com/docs/#Configuration.  It's not working correctly when I click to sort by differnt column.  This page is at  http://www.labctsi.org/index.php/cct/Advisory_Committee_Minutes.  How can I fix this?  Thank you.
The table id for this is "minutes".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>Los Angeles Basin Clinical Translational Science Institute (LABCTSI)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="/newcss/basic.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/site.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/layout.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/accordionMenu.css" type="text/css" />
        <link rel="stylesheet" href="http://www.labctsi.org/newcss/tablesorter.css" type="text/css" />

        <!-- Setup audio player -->
	<script type="text/javascript" src="http://www.labctsi.org/flash/audio-player.js"></script>
        <script type="text/javascript">  
            AudioPlayer.setup("http://www.labctsi.org/flash/player.swf", {  
                width: 290  
            });  
        </script>

    <!-- Css styles for main menu (Superfish + jQuery) -->
	<link rel="stylesheet" type="text/css" href="/newcss/superfish-dropdown.css" media="screen" />
	
	<!-- Javascript and initialization of main menu (Superfish) -->
	<script type="text/javascript" src="/js/jquery.js"></script> 
	<script type="text/javascript" src="/js/hoverIntent.js"></script> 
	<script type="text/javascript" src="/js/superfish.js"></script>
	<script type="text/javascript" src="/js/supersubs.js"></script>
	
    <script type="text/javascript" src="http://www.labctsi.org/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="http://www.labctsi.org/js/jquery.tablesorter.pager.js"></script>  	

	<!-- Initialise main menu (Superfish) -->
	<script type="text/javascript"> 
	
	$(document).ready(function() {
 	        $("ul.sf-menu").supersubs({ 
                minWidth:    8,   // minimum width of sub-menus in em units 
                maxWidth:    25,   // maximum width of sub-menus in em units 
                extraWidth:  0     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
            }).superfish();
			
        $("#minutes")
            .tablesorter({ widthFixed: true, sortList: [[0, 0]], widgets: ['zebra'] })
            .tablesorterPager({ container: $("#pager") });			
			
			//slides the element with class "menu_body" when mouse is over the paragraph
			$("#committeeMenu p").mouseover(function()
			{	
			$(this).css({backgroundImage:"/media/images/url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
						   $(this).siblings().css({backgroundImage:"/media/images/url(left.png)"});
						});		
	});
	

 	</script>


</head>

Open in new window

lapuccaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Albert Van HalenAnalyst developerCommented:
You have to include TBODY tag
0
lapuccaAuthor Commented:
Thank you for catching that.  I've added the <tbody> tag but the data still disappear when I click to sort.
{embed="new_includes/document_header"}
<body class="centersubpage twocolumn">
	{embed="new_includes/usc_identity_bar"}
	<div id="wrapper">
        {embed="new_includes/header"}
        {embed="new_includes/main_navigation"}
		<ul id="breadcrumb">
            <li><a href="http://www.labctsi.org/" title="Home"><img src="/media/images/home.png" alt="Home" class="home" /></a></li>
            <li><a href="#">Centers</a></li>
            <li><a href="http://www.labctsi.org/index.php/cct/">Office of Community Engagement (OCE)</a></li>
            <li>Advisory Committee Meeting Minutes</li>
        </ul>
		<div id="mainContent">
			{embed="new_includes/CCT_secondaryNavigationColumn"}
			<div id="informationColumn">
                <h1>Community Advisory Committee Meeting Minutes</h1>
				</br>
			<table id="minutes" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
			<thead> 
				<tr>
					<th> Meeting Date </th>
					<th> Meeting Title </th>
					<th> Meeting Notes File </th>
				</tr>
			</thead>
                        <tbody>
			{exp:weblog:entries weblog="CCT_Advisory_Minutes"order_by="meetingDate" sort="desc"}
			
			<?php
				$fullFileName = "{meetingNotes}";				
				$fileName = (strrchr($fullFileName, "/"));
				$fileName = substr($fileName, 1);

                               
				echo "<tr>";
				echo "<td>" . "{meetingDate format="%F %d, %Y"}" . "</td>";
				echo "<td>" . "{title}" . "</td>";
				echo "<td><a href='$fullFileName'>" . "$fileName" ."</a></td>";
				echo "</tr>";
			?> 
			{/exp:weblog:entries}	
                        </tbody>
			</table>			
 
			</div>
		</div>
		{embed="new_includes/footer"}
	</div>
</body>

Open in new window

0
kadabaCommented:
No use of this

.tablesorterPager({container: $("#pager")});

when you don't intend to use the pager plugin.

remove it and should work fine or rather include the container and it should work fine.

good luck.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

lapuccaAuthor Commented:
I would like to have the pager for my table listing becuase it could grow to be hundreds of listings.  The Pager plugin is included but what do you mean to include the container?  How do I do that?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>Los Angeles Basin Clinical Translational Science Institute (LABCTSI)</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="/newcss/basic.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/site.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/layout.css" type="text/css" />
	<link rel="stylesheet" href="/newcss/accordionMenu.css" type="text/css" />
        <link rel="stylesheet" href="http://www.labctsi.org/newcss/tablesorter.css" type="text/css" />

        <!-- Setup audio player -->
	<script type="text/javascript" src="http://www.labctsi.org/flash/audio-player.js"></script>
        <script type="text/javascript">  
            AudioPlayer.setup("http://www.labctsi.org/flash/player.swf", {  
                width: 290  
            });  
        </script>

    <!-- Css styles for main menu (Superfish + jQuery) -->
	<link rel="stylesheet" type="text/css" href="/newcss/superfish-dropdown.css" media="screen" />
	
	<!-- Javascript and initialization of main menu (Superfish) -->
	<script type="text/javascript" src="/js/jquery.js"></script> 
	<script type="text/javascript" src="/js/hoverIntent.js"></script> 
	<script type="text/javascript" src="/js/superfish.js"></script>
	<script type="text/javascript" src="/js/supersubs.js"></script>
	
    <script type="text/javascript" src="http://www.labctsi.org/js/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="http://www.labctsi.org/js/jquery.tablesorter.pager.js"></script>  	

	<!-- Initialise main menu (Superfish) -->
	<script type="text/javascript"> 
	
	$(document).ready(function() {
 	        $("ul.sf-menu").supersubs({ 
                minWidth:    8,   // minimum width of sub-menus in em units 
                maxWidth:    25,   // maximum width of sub-menus in em units 
                extraWidth:  0     // extra width can ensure lines don't sometimes turn over 
                                   // due to slight rounding differences and font-family 
            }).superfish();
			
        $("#minutes")
            .tablesorter({ widthFixed: true, sortList: [[0, 0]], widgets: ['zebra'] })
            .tablesorterPager({ container: $("#pager") });			
			
		//slides the element with class "menu_body" when mouse is over the paragraph
		$("#committeeMenu p").mouseover(function() {
			$(this).css({backgroundImage:"url(/media/images/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
			$(this).siblings().css({backgroundImage:"url(/media/images/left.png)"});
		});					
			
	});
	

 	</script>


</head>

Open in new window

0
kadabaCommented:
Sorry for being unclear.
http://tablesorter.com/docs/example-pager.html
Have a look at this example.

>> what do you mean to include the container
You have missed this piece of code
<div id="pager" class="pager">      <form>            <img src="../addons/pager/icons/first.png" class="first"/>            <img src="../addons/pager/icons/prev.png" class="prev"/>            <input type="text" class="pagedisplay"/>            <img src="../addons/pager/icons/next.png" class="next"/>            <img src="../addons/pager/icons/last.png" class="last"/>            <select class="pagesize">                  <option selected="selected"  value="10">10</option>                  <option value="20">20</option>                  <option value="30">30</option>                  <option  value="40">40</option>            </select>      </form></div>

What  I suggest is take out the line of code
.tablesorterPager({ container: $("#pager") and try .

then include the code you have missed and this
.tablesorterPager({ container: $("#pager")
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lapuccaAuthor Commented:
Hi, sorry it took me a while to get back to this project.  
It does work after I take out the pager code, .tablesorterPager({ container: $("#pager") .  I do want to have the pager feature. I'm kind of confused about where to put the missing section of code you stated for the div id=pager.  Thank you.
0
lapuccaAuthor Commented:
I figure out where to put the code.  Thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.