[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 591
  • Last Modified:

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

0
lapucca
Asked:
lapucca
  • 4
  • 2
2 Solutions
 
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now