melvint91
asked on
TableSorter Problem
I'm trying to use the TableSorter and the TableSorterPagination function. I tested the example (tablesorter.html) and it works fine (table sorter and pagination). Now, when i edit the example to what I'm trying to create, none of the sort and pagination function works on my "tablesorter.php" file, once I included my php code. ANY HELP Please....see 2 files below...
Tablesorter.html:
<html>
<head>
<title> Jquery Plugin: TableSorter</title>
<link rel="stylesheet" href="css/tsorter_style.cs s" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.j s"></scrip t>
<script type="text/javascript" src="js/jquery.tablesorter .js"></scr ipt>
<script type="text/javascript" src="js/jquery.tablesorter .pager.js" ></script>
</head>
<!-- I will only list some data to give idea of what's going on -->
<body>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Age</th>
<th>Premium Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>mendes</td>
<td>Domnic</td>
<td>domnic@gmail.com</td>
<td>29</td>
<td>5500</td>
</tr>
---- remaining rows ---
</tbody>
</table>
<div id="page" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option values="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function ()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({contain er: $("#pager")});
}
};
</script>
</body>
</html>
Tablesorter.php
<html>
<head>
<title> Jquery Plugin: TableSorter</title>
<link rel="stylesheet" href="css/tsorter_style.cs s" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.j s"></scrip t>
<script type="text/javascript" src="js/jquery.tablesorter .js"></scr ipt>
<script type="text/javascript" src="js/jquery.tablesorter .pager.js" ></script>
</head>
<!-- I will only list some data to give idea of what's going on -->
<body>
<?php
include("db_connect.php");
$query="SELECT * FROM usr_accts ORDER by lname";
$result=mysql_query($query );
$num=mysql_numrows($result );
mysql_close();
echo "<b><center>User Accts Information</center></b><b r>";
?>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<?
$i=0;
while($i < $num) {
$id=mysql_result($result, $i, "id");
$fname=mysql_result($resul t, $i, "fname");
$lname=mysql_result($resul t, $i, "lname");
---- remaining fields ---
?>
<tbody>
<tr>
<td><? echo $fname; ?></td>
<td><? echo $lname; ?></td>
--- remaining rows ---
</tr>
<?
$i++
?>
</tbody>
</table>
<div id="page" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option values="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function ()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({contain er: $("#pager")});
}
};
</script>
</body>
</html>
Tablesorter.html:
<html>
<head>
<title> Jquery Plugin: TableSorter</title>
<link rel="stylesheet" href="css/tsorter_style.cs
<script type="text/javascript" src="js/jquery-1.3.1.min.j
<script type="text/javascript" src="js/jquery.tablesorter
<script type="text/javascript" src="js/jquery.tablesorter
</head>
<!-- I will only list some data to give idea of what's going on -->
<body>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Age</th>
<th>Premium Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>mendes</td>
<td>Domnic</td>
<td>domnic@gmail.com</td>
<td>29</td>
<td>5500</td>
</tr>
---- remaining rows ---
</tbody>
</table>
<div id="page" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option values="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({contain
}
};
</script>
</body>
</html>
Tablesorter.php
<html>
<head>
<title> Jquery Plugin: TableSorter</title>
<link rel="stylesheet" href="css/tsorter_style.cs
<script type="text/javascript" src="js/jquery-1.3.1.min.j
<script type="text/javascript" src="js/jquery.tablesorter
<script type="text/javascript" src="js/jquery.tablesorter
</head>
<!-- I will only list some data to give idea of what's going on -->
<body>
<?php
include("db_connect.php");
$query="SELECT * FROM usr_accts ORDER by lname";
$result=mysql_query($query
$num=mysql_numrows($result
mysql_close();
echo "<b><center>User Accts Information</center></b><b
?>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<?
$i=0;
while($i < $num) {
$id=mysql_result($result, $i, "id");
$fname=mysql_result($resul
$lname=mysql_result($resul
---- remaining fields ---
?>
<tbody>
<tr>
<td><? echo $fname; ?></td>
<td><? echo $lname; ?></td>
--- remaining rows ---
</tr>
<?
$i++
?>
</tbody>
</table>
<div id="page" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option values="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({contain
}
};
</script>
</body>
</html>
Could you please explain what exactly the problem is ? And it would not consume time for us to figure and fix it ?
ASKER
darren-w: I forgot to include the curly brackets when I typed it in above.
pius babbun: basically, you should be able to click any table header and it sorts "asc". Also, you should be able to select how many rows per page you want to display. Everything works correctly in the tablesorter.html page (example I downloaded). Once I modified "tablesorter.html" and included PHP coding (tablesorter.php), none of the functions work, for example sorting table by selecting any header and when I select a page number at bottom of table to display specific row amount per page--doesn't work anymore..
pius babbun: basically, you should be able to click any table header and it sorts "asc". Also, you should be able to select how many rows per page you want to display. Everything works correctly in the tablesorter.html page (example I downloaded). Once I modified "tablesorter.html" and included PHP coding (tablesorter.php), none of the functions work, for example sorting table by selecting any header and when I select a page number at bottom of table to display specific row amount per page--doesn't work anymore..
Can you show the source the php outputs, I think it may be to do with the table code not being well formed
ASKER
darren-w: Are you asking to see the source code? if yes, it's within the code I sent... If you asking to see the output, I can't display it because it's on our Secured server.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Wasn't exactly what i wanted to do but it was a substitute missing only one feature.
Open in new window