Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts

    jquery table sort not working

    whenever i click the column head it won't sort and the icon arrow for ascending and descending it not seen...

    they are both in the same folder

    look at this image... there is no arrow icon

    here is the code for that
    Code:
    <?php session_start();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    
    <link href="js-css/style.css" rel="stylesheet" type="text/css" />
    
    	<link rel="stylesheet" href="js-css/blue/style.css" type="text/css" id="" media="print, projection, screen" />
    	<script type="text/javascript" src="js-css/jquery-latest.js"></script>
    	
    	<script type="text/javascript" src="js-css/jquery.tablesorter.js"></script>
    	<script type="text/javascript" src="js-css/addons/pager/jquery.tablesorter.pager.js"></script>
    	<script type="text/javascript" src="js-css/chili/chili-1.8b.js"></script>
    	<script type="text/javascript" src="js-css/docs.js"></script>
    	<script type="text/javascript" src="js-css/examples.js"></script>
    <script type="text/javascript" id="js">$(document).ready(function() {
    	$("table").tablesorter({
    		// pass the headers argument and assing a object
    		headers: {
    			// assign the secound column (we start counting zero)
    			9: {
    				// disable it by setting the property sorter to false
    				sorter: true
    			},
    			// assign the third column (we start counting zero)
    			9: {
    				// disable it by setting the property sorter to false
    				sorter: true
    			}
    		}
    	});
    });</script>
    
    
    <script type="text/javascript" src="js-css/jquery.min.js"></script>
    <script type="text/javascript" src="js-css/ddaccordion.js"></script>
    <script type="text/javascript">
    ddaccordion.init({
    	headerclass: "submenuheader", //Shared CSS class name of headers group
    	contentclass: "submenu", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
    	mouseoverdelay: 1000, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    	animatedefault: false, //Should contents open by default be animated into view?
    	persiststate: true, //persist state of opened contents within browser session?
    	toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    	togglehtml: ["suffix", "<img src='../images/plus.gif' class='statusicon' />", "<img src='../images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    </script>
    
    <style type="text/css">
    
    .glossymenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    border: 1px solid #9A9A9A;
    border-bottom-width: 0;
    }
    
    .glossymenu a.menuitem{
    background: black url(../images/light.jpg) repeat-x bottom left;
    font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 4px 0;
    padding-left: 10px;
    text-decoration: none;
    }
    
    
    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: white;
    }
    
    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    }
    
    .glossymenu a.menuitem:hover{
    background-image: url(dark.jpg) repeat-x bottom left;
    }
    
    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    }
    
    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    
    .glossymenu div.submenu ul li{
    border-bottom: 1px solid blue;
    }
    
    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    color: black;
    text-decoration: none;
    padding: 2px 0;
    padding-left: 10px;
    }
    
    .glossymenu div.submenu ul li a:hover{
    background: #DFDCCB;
    colorz: white;
    }
    
    
    body {
    	background-color: #E6E6E6;
    }
    </style>
    
    <title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
    
    <body class="twoColElsLt">
    <div class="header">
     <table width="200" border="0">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
    <div id="container">
    
    <div id="sidebar1">
    <div class="glossymenu">
    
    <a class="menuitem submenuheader">Administrator</a>
    <div class="submenu">
    	<ul>
         <li><a href="index.php">Home</a></li>
    	<li><a href="../index.php">Logout</a></li>
    	
    	</ul>
    </div>
    <a class="menuitem submenuheader">Employees</a>
    <div class="submenu">
    	<ul>
    	<li><a href="add_employee.php">Add Employee</a></li>
    	</ul>
    </div>
    
    <a class="menuitem submenuheader" href="http://www.cssdrive.com">CSS Drive</a>
    <div class="submenu">
    	<ul>
    	<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
    
    	</ul>
    
    </div>
    </div>
    </div>
    
    
    
    
    <div id="mainContent">
    
    </div>
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    <table width="200" border="0">
      <tr>
        <td>	<?php
    $con = mysql_connect("localhost","root","root");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }
    
    mysql_select_db("php", $con);
    
    $result = mysql_query("SELECT * FROM account");
    
    echo "<table cellspacing='1' class='tablesorter'>
    <thead>
    <tr>
    <th>username</th>
    <th>password</th>
    </tr> </thead>";
    
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['username'] . "</td>";
      echo "<td>" . $row['password'] . "</td>";
      echo "</tr>";
    
      }
    echo "</table>";
    
    mysql_close($con);
    ?> </td>
      </tr>
    </table>
    
        <br class="clearfloat" />
    <!-- end #container --></div>
    Copyright 2009 sher_amf
    </body>
    </html>

    look at this it works okay..


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    <head>
    	<title>jQuery plugin: Tablesorter 2.0 - Disable headers using options</title>
    	
    	<link rel="stylesheet" href="js-css/blue/style.css" type="text/css" id="" media="print, projection, screen" />
    	<script type="text/javascript" src="js-css/jquery-latest.js"></script>
    	
    	<script type="text/javascript" src="js-css/jquery.tablesorter.js"></script>
    	<script type="text/javascript" src="js-css/addons/pager/jquery.tablesorter.pager.js"></script>
    	<script type="text/javascript" src="js-css/chili/chili-1.8b.js"></script>
    	<script type="text/javascript" src="js-css/docs.js"></script>
    	<script type="text/javascript" src="js-css/examples.js"></script>
    <script type="text/javascript" id="js">$(document).ready(function() {
    	$("table").tablesorter({
    		// pass the headers argument and assing a object
    		headers: {
    			// assign the secound column (we start counting zero)
    			9: {
    				// disable it by setting the property sorter to false
    				sorter: true
    			},
    			// assign the third column (we start counting zero)
    			9: {
    				// disable it by setting the property sorter to false
    				sorter: true
    			}
    		}
    	});
    });</script>
    </head>
    <body>
    <div id="banner">	
    	<h1>table<em>sorter</em></h1>
    	<h2>Disable headers using options</h2>
    	<h3>Flexible client-side table sorting</h3>
    	<a href="index.html">Back to documentation</a>
    </div>
    <div id="main">
    	<h1>Demo</h1>
    	<div id="demo">
    		<?php
    $con = mysql_connect("localhost","root","root");
    if (!$con)
      {
      die('Could not connect: ' . mysql_error());
      }
    
    mysql_select_db("php", $con);
    
    $result = mysql_query("SELECT * FROM account");
    
    echo "<table cellspacing='1' class='tablesorter'>
    <thead>
    <tr>
    <th>username</th>
    <th>password</th>
    </tr> </thead>";
    
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['username'] . "</td>";
      echo "<td>" . $row['password'] . "</td>";
      echo "</tr>";
    
      }
    echo "</table>";
    
    mysql_close($con);
    ?> 
    	</div>
    
    </div>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
    _uacct = "UA-2189649-2";
    urchinTracker();
    </script>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Dec 2007
    Posts
    82
    Thanks
    10
    Thanked 0 Times in 0 Posts
    resolved.... it seems the initialization of jquery has been doubled


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •