Apologies from the off if this is an amateurish question.
I am trying to get the Jquery Tablesorter plugin to work with a table generated with PHP from a MySql database. At the moment I'm unable to get the sorting to work. I'm thinking its something to do with the sequence of the javascript and php operating and may need to implement a callback in the javascript or something. Anyway code I have is:
<html>
<head>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#table1").tablesorter({ sortlist: [0,0] });
});
</script>
</head>
<body>
<?php
$con = mysql_connect("localhost","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("Database1", $con);
$result = mysql_query("SELECT * FROM PlayerStats1 WHERE G>2 LIMIT 0,20");
echo "<table id=\"table1\" class=\"tablesorter\" border=1px>
<caption align=top>Stats</caption>
<thead>
<tr>
<th width=90px>Forename</th>
<th width=90px>Surname</th>
<th width=50px>Team</th>
<th width=40px>G</th>
<th width=50px>RPG</th>
<th width=50px>APG</th>
<th width=50px>TOPG</th>
<th width=50px>BPG</th>
<th width=50px>SPG</th>
<th width=50px>PPG</th>
</tr>
</thead>";
while($row = mysql_fetch_array($result))
{
echo "<tbody>";
echo "<tr>";
echo "<td>" . $row['FORENAME'] . "</td>";
echo "<td>" . $row['SURNAME'] . "</td>";
echo "<td align='center'>" . $row['TEAM'] . "</td>";
echo "<td align='center'>" . $row['G'] . "</td>";
echo "<td class='col1' align='center'>" . $row['RPG'] . "</td>";
echo "<td class='col2' align='center'>" . $row['APG'] . "</td>";
echo "<td class='col3' align='center'>" . $row['TOPG'] . "</td>";
echo "<td class='col4' align='center'>" . $row['BPG'] . "</td>";
echo "<td class='col5' align='center'>" . $row['SPG'] . "</td>";
echo "<td class='col6' align='center'><b>" . $row['PPG'] . "</b></td>";
echo "</tr>";
echo "</tbody>";
}
echo "</table>";
mysql_close($con);
?>
</body>
</html>
If it is a case of implementing a call back- any guidance/code would be much appreciated.
Has nothing to do with the sequence; your browser executes the Javascript, and as far as it's concerned, the PHP-generated HTML is the same as any HTML, so the fact that it's generated is irrelevant. I suggest you turn on debug mode in tablesorter and use Firebug and see if that illuminates the issue, otherwise I'm not seeing, on the surface, what could be causing a problem. Not that it might not be there, I'm just missing it. :)
the Tbody tag should be called only once and outside of your TR loop.
TBody is a singular collection of ALL your table body TR elements. that's going to jack tablesorter up.
Related
I firstly did the table layout and made sure everything is working, after connecting the table to a database and trying to put the records inside it, everything worked perfectly, but the class didnt, i have now the boring table without the layout made.
<body>
<h1>Employees</h1>
<table class="responstable">
<?php
require 'connection.php';
$conn = Connect();
$result = mysqli_query($conn,"SELECT * FROM employee");
echo "<table border='1'>
<tr>
<th>Id</th>
<th>First name</th>
<th>Last name</th>
<th>Salary</th>
<th>Start Date</th>
<th>Department</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['firstname'] . "</td>";
echo "<td>" . $row['lastname'] . "</td>";
echo "<td>" . $row['salary'] . "</td>";
echo "<td>" . $row['startdate'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
<script src='http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script>
</body>
</html>
the table class is "responstable"
table tag is defined in 2 places.try removing this.
echo "<table border='1'>
or remove the table tag at the top after h1 tag and add the class to the table tag defined in the echo as,
complete code
<body>
<h1>Employees</h1>
<?php
require 'connection.php';
$conn = Connect();
$result = mysqli_query($conn,"SELECT * FROM employee");
echo "<table border='1' class='responstable'>
<tr>
<th>Id</th>
<th>First name</th>
<th>Last name</th>
<th>Salary</th>
<th>Start Date</th>
<th>Department</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['firstname'] . "</td>";
echo "<td>" . $row['lastname'] . "</td>";
echo "<td>" . $row['salary'] . "</td>";
echo "<td>" . $row['startdate'] . "</td>";
echo "<td>" . $row['department'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
<script src='http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script>
</body>
</html>
so I am using an HTML template, and have a dynamic table generated by PHP. For whatever reason, when I add the php table in, I can no longer scroll on the page. I am wondering if there is some work around, or there is something I should be looking for in the template CSS to fix this.
Here is my HTML with the embedded PHP:
<div class="block-head">
<h2>Datatable All Features</h2>
</div>
<div class="block-content np">
<table cellpadding="0" cellspacing="0" width="100%" class="table table-bordered table-striped sortable">
<thead>
<tr>
<th><input type="checkbox" class="checkall"/></th>
<th width="25%">Name</th>
<th width="25%">Gender</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($query)) {
echo "<tr>";
echo "<td>" . $row[username] . "</td>";
echo "<td>" . $row[gender] . "</td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
Here is my query, which I have above my HTML, for whatever it's worth. I know it's deprecated (just not a top priority right now):
$query = mysql_query("SELECT * FROM markerfollowing WHERE markerID = '$markerid'"); //query
When I remove the php in the table, it scrolls fine. When I put it back, no dice.
Sincere thanks for any help!
Here is my solution:
<?php
while ($row = mysql_fetch_array($query)) {
echo "<tr>";
echo "<td>" . '<input type="checkbox" name="checkbox"/>' . "</td>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['gender'] . "</td>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['gender'] . "</td>";
echo "</tr>";
}
?>
It's probably an error 500 which you cannot see because of your PHP.ini configuration.
change the $row[username] to $row['username'] and do the same with the gender.
This should do the job:
<?php
while ($row = mysql_fetch_array($query)) {
echo "<tr>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['gender'] . "</td>";
echo "</tr>";
}
?>
So this is my simple php code just to output them on a simple table. I was hoping I make it a sortable table and i do not understand most of the sources from online. Could someone show me a simple or at least the way to do it? I could also go for a drop down menu to select how to list the following data columns!
$connect = mysql_connect("localhost","root","");
if(!$connect){
die("Can not connect: " . mysql_error());
}
mysql_select_db("safedrive", $connect);
$sql = "SELECT * FROM users";
$myData = mysql_query($sql,$connect);
echo "<table border=1>
<tr>
<th>ID</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Model</th>
<th>Year</th>
<th>Plate Number</th>
<th>City</th>
<th>Country</th>
</tr>";
while($record = mysql_fetch_array($myData)){
echo "<tr>";
echo "<td>" . $record['id'] . "</td>";
echo "<td>" . $record['email'] . "</td>";
echo "<td>" . $record['firstName'] . "</td>";
echo "<td>" . $record['lastName'] . "</td>";
echo "<td>" . $record['model'] . "</td>";
echo "<td>" . $record['Year'] . "</td>";
echo "<td>" . $record['plateNumber'] . "</td>";
echo "<td>" . $record['city'] . "</td>";
echo "<td>" . $record['country'] . "</td>";
echo "<br />";
}
echo "</table>";
I understand it is probably better done in the HTML tag, but I would like to hear some proper opinions.
Use this : TableSorter 2.0 , you just need to install the plugin and configure a bit the js file. All is well explained on the site
Trying to add tablesorter added to a page I am creating. I know very little of jquery, so I'm guessing that's where my fault is. I've added the required code in the <head> area of my page, and made the necessary changes to my table. My table still renders as it would with just HTML. Ideas?
<html>
<head>
<title>Inventory</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("table").tablesorter(); });
</script>
</head>
<body>
<?php
$con=mysqli_connect("localhost","user","pass","db_name");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query = "SELECT
products.name,
products.sku,
inventory.quantityfry,
inventory.quantityjuv,
inventory.quantityadult,
inventory.notes,
inventory.location,
inventory.owner
FROM
products
INNER JOIN
inventory
ON
products.sku=inventory.sku";
$result = mysqli_query($con,$query) or die(mysqli_error($con));
echo "<table border='1' id='table' class='tablesorter'>
<thead>
<tr>
<th>Species</th>
<th>SKU</th>
<th>Fry Count</th>
<th>Juvie Count</th>
<th>Adult Count</th>
<th>Notes</th>
<th>Location</th>
<th>Owner</th>
</tr>
</thead>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tbody>";
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['sku'] . "</td>";
echo "<td>" . $row['quantityfry'] . "</td>";
echo "<td>" . $row['quantityjuv'] . "</td>";
echo "<td>" . $row['quantityadult'] . "</td>";
echo "<td>" . $row['notes'] . "</td>";
echo "<td>" . $row['location'] . "</td>";
echo "<td>" . $row['owner'] . "</td>";
echo "</tr>";
echo "</tbody>";
}
mysqli_free_result($result);
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
Thanks!
Three things:
Don't link directly to tablesorter at tablesorter.com - make a copy to your own server, or use a copy at a CDN (this is of my fork of tablesorter at cdnjs.com).
Include a <!DOCTYPE html> at the top of your HTML otherwise IE will change into quirks mode and pretty much make your site look bad.
As #MikeB mentioned, the above code wraps every row in a tbody, correct the code as follows (this is just a snippet):
echo "<table border='1' id='table' class='tablesorter'>
<thead>
<tr>
<th>Species</th>
<th>SKU</th>
<th>Fry Count</th>
<th>Juvie Count</th>
<th>Adult Count</th>
<th>Notes</th>
<th>Location</th>
<th>Owner</th>
</tr>
</thead><tbody>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['sku'] . "</td>";
echo "<td>" . $row['quantityfry'] . "</td>";
echo "<td>" . $row['quantityjuv'] . "</td>";
echo "<td>" . $row['quantityadult'] . "</td>";
echo "<td>" . $row['notes'] . "</td>";
echo "<td>" . $row['location'] . "</td>";
echo "<td>" . $row['owner'] . "</td>";
echo "</tr>";
}
mysqli_free_result($result);
echo "</tbody></table>";
I am having trouble applying CSS styles to my dynamic table. I am connecting to a database and I know the data is populated correctly and displaying. My issue is that there are 900 records and I want to limit the table size, utilizing a scrollbar. I have read elseware that the proper CSS style nodes to accomplish this are: How to specify table's height such that a vertical scroll bar appears?
overflow: auto;
height: 700px;
display: block;
overflow-y: scroll;
At first I attempted this with inline styling (a no-no.. I realize), but it didn't work. I have read about adding a 'class' to the table and/or individual rows, which would then be reflected in my CSS style sheet, but I can't seem to figure out how to accomplish this. I get syntax errors when I add 'span' or 'class' tag designators to the PHP (I imagine from utilizing 'ECHO' - which both require double quotes).
Good example of what I'm trying to accomplish: http://www.timrivera.com/tests/csstables.html#markupIE
The PHP code snippet below has good syntax, but I don't know where to add the class or span designators appropriately. One thing to note - I need to have different styles for different tables, so changing the global 'table' CSS isn't going to work.
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
I think the best way would be to wrap a div around the table and give the div a height.
http://phpfiddle.org/main/code/i7h-9b1
<style type="text/css">
#scroll {
height: 100px; /* Max height of table */
overflow-y: scroll;
width: 340px;
}
</style>
<div id="scroll">
table
</div>
Using your code:
echo '
<style type="text/css">
#scroll {
height: 100px; /* Max height of table */
overflow-y: scroll;
width: 340px;
}
</style>';
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<div id='scroll'><table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table></div>";
Edit your PHP code to...
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<div class=\"table-container\">";
echo "<table border='1' >
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
echo "</div>";
Then just style using
div.table-container table {}
Using Calum's style format you could do this:
//Function that gets the SQL recordset.
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<style>#size{height:100px;width:340px;overflow-y:scroll;}</style>";
echo "<table id='size' border='1'>
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>
</tr>";
while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";
I tested it and works fine. And for the different table styles you could:
<style>
#table1
{
style code here
}
#table2
{
style code here
}
</style>
and so on... then you could apply them to the tables:
<table id="table1">
...
</table>
<table id="table2">
...
</table>