I am trying to work with Tablesorter but it doesn't seem to work when I output the table using PHP.
My PHP code:
function displayHours() {
include 'dbinfo.php';
global $name;
$date = $_SESSION["selectedDate"];
$result = mysqli_query($con, "SELECT * FROM hours WHERE name='$name' AND date='$date'");
echo '<thead><tr>
<th><center>Project name</th>
<th><center>Hour(s)</th>
</tr></thead>';
$color = FALSE;
while($row = mysqli_fetch_array($result))
{
if (!$color) {
echo "<tbody><tr>";
$color = TRUE;
} else if ($color) {
echo "<tbody><tr class=\"alt\">";
$color = FALSE;
}
echo "<td> " . $row['projectName'] . "</td>";
echo "<td> " . $row['description'] . "</td>";
echo '</tr> ';
echo '</tbody>';
}
}
My html code:
<div class="datagrid">
<table id="myTable" class="tablesorter">
<?php displayHours();?>
</tbody>
</table>
</div>
My jQuery code:
$(document).ready(function () {
$("#myTable").tablesorter();
});
If I output two in one loop it at least sorts them, but once I only make it one it wont do anything.
I tried everything, any help please?
There is no problem with the tablesorter, but your table html. You PHP code generates thead and several tbody tags. Normally there should be one tbody tag.
To fix that in your PHP before your while loop in put tbody opening and after your loop close the tag.
//open tbody tag
echo "<tbody>";
while($row = mysqli_fetch_array($result)){
//print rows
}
//close tbody tag
echo "</tbody>";
There is also an unnecessary tbody closing in your "html code", it's better to remove it.
<div class="datagrid">
<table id="myTable" class="tablesorter">
<?php displayHours();?>
</table>
</div>
Then your tablesorter would be working smoothly.
I know while using tablesorter myself. I had to use
$(table).trigger("update")
to get a dynamically added table to update, however this wasn't with php.
Related
I'm trying to use jquery to click a link in one div and have it open an HTML document in another div (named infoblock) that sits beside the original div. I found an example here but I can't get it to work. I found a couple other variations on the net, but still no luck. Part of the link needs to transmit a variable so I'm not sure if that's part of the problem. I tried attaching the click function to a div surrounding the link with an ID of "nav" as well as the link itself with an ID of "details". When I click on the link, it opens the correct page in the full window, not in the div it's supposed to go to. Thank you in advance for any help.
$(document).ready(function() {
$("#reservename").click(function() {
$("#infoblock").load("createhandle.html");
});
$("#uploadpic").click(function() {
$("#infoblock").load("uploadpic.php");
});
$("#deletechar").click(function() {
$("#infoblock").load("selectdelete.php");
});
$("#nav").click(function() {
$("#infoblock").load($(this).find("a").attr("href"));
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="charlist" class="block">
<b>Your Characters:<b>
<br>
<button id="reservename">Reserve A Name</button>
<button id="uploadpic">Upload A Picture</button>
<button id="deletechar">Delete</button>
<?php
$result5 = mysqli_query($con,"SELECT * FROM handle WHERE user='$handle' ORDER BY charname ASC");
while($row = mysqli_fetch_array($result5))
{
echo "<table>";
echo "<tr>";
echo "<td rowspan=5 align=left><img src='../pictures/" . $row['face'] . "' border=3></td>";
echo "<th align=left><a href='chat.php?charname=" . $row['charname'] . "'>" . $row['charname'] . "</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><a href='choosepic.php?charname=" . $row['charname'] . "'>Choose Picture</a></th>";
echo "</tr>";
echo "<tr>";
echo "<th align=left><div id='nav'><a id='details' href='../details.html?charname=" . $row['charname'] . "'>Details</a></div></th>";
echo "</tr>";
if ($row['type'] == 'new'){
echo "<tr>";
echo "<th align=left><a href='createsheet.php?charname=" . $row['charname'] . "'>Create</a></th>";
echo "</tr>";
}
echo "<hr>";
echo "</table>";
}
?>
</div>
<p id="infoblock" class="block"></p>
You have to prevent the default behaviour when anchor tag is clicked In order to do that that you have to be listen for click on the anchor itself not div and return false in order to prevent its default behaviour. So your code will become like this
$('#details').click(function(e){
{
e.preventDefault(); //instead of this you can also return false
$("#infoblock").load($('#details').attr("href"));
}
});
This works for me:
$(document).ready(function(){
$('#details').click(function(e){
e.preventDefault();
$("#infoblock").html('<object type="text/html" data="'+$('#details').attr("href")+'" >');
});
});
So I have an SQL query which pulls all data from a mysql table, called example:
function get_example($conn){
$statement = "SELECT * FROM `example`";
if ($result = $conn->query($statement)) {
$rows = array();
while($row = $result->fetch_array()){
$rows[] = $row;
}
return $rows;
} else {
return 0;
}
}
I call this function in PHP and store the value in $example. I can then use a foreach to create a table of everything:
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Description</td>
</tr>
<?php
foreach($example as $entry){
echo "<tr>";
echo "<td>" . $entry['id'] . "</td>";
echo "<td>" . $entry['name'] . "</td>";
echo "<td>" . $entry['description'] . "</td>";
echo "</tr>";
}
?>
</table>
This is all simple enough and I can use a form with method POST to choose a value and filter the table accordingly (for eg, only show entires where the description field is a certain value).
My question is, how do I filter this table using JS?
I would want to have html buttons which, when clicked, call a function which changes the relevant tags css property for visibility from hidden to visible.
So - by default every tag is listed int he table with visibility proeprty set to hidden. Then, when certain elements are clicked, the associated elements are set to visible.
Is this possible? My JS knowledge is limited so the more I look into it, the more it seems the PHP form may be the ssafest way to go
Thanks
If you want the Filtering in your table with the help of JavaScript. the i suggest Datatables for it.
DataTables:
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You Can find More Example on datatables here
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
foreach($example as $entry){
<tr>
<td><?php $entry['id']; ?></td>
<td><?php $entry['name']; ?></td>
<td><?php $entry['description']; ?></td>
</tr>
}
?>
</tbody>
</table>
Js
$(document).ready(function() {
$('#example').DataTable();
});
Add this cdn links to your page
https://code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
If you choose to filter objetcs client-side using javascript you could use array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
or the usefull library underscorejs http://underscorejs.org/
Like in the title I would like to use a variable inside the hyperlink to use it into the modal window.
I am not using bootstrap, it is a custom code but it works until I try to put some kind of <a href='#openModal?id=".$VARIABLE."'>
Is it possible to do that?
Regards
Update:
<?php
$query = "SELECT * FROM USER";
$result = mysqli_query ($connection,$query)
or die ("You couldn’t execute query");
echo "<div class='admin-table'>
<table cellspacing='15'>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC))
{
extract ($row);
echo "<tr>\n
<td>$USER_LASTNAME</td>\n
<td>$USER_FIRTSNAME</td>\n
<td>$USER_PHONE</td>\n
<td>$USER_ADDRESS</td>\n
<td>$USER_POSTCODE</td>\n
<td>$USER_DOB</td>\n
<td>$USER_EMAIL</td>\n
<td>$USER_PASSWORD</td>\n
<td>$USER_ROLE</td>\n
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>\n
<td><a href='#openModal?id=".$USER_ID."'>Edit</a></td>\n
</tr>\n";
echo "<tr><td colspan ='15'><hr></td></tr>\n";
}
echo "</table></div>\n";
?>
<div id="openModal?id=<?php echo $USER_ID; ?>" class="modalDialog">
<div>X
<h2>$USER_ID</h2>
</div>
</div>
It is working the modal but its just taking the last id, I have to think another solution to pass the variable.
Many thanks for your help
Update 2:
Thank you very much! Now its working,
<?php
$query = "SELECT * FROM USER;";
$result = mysqli_query ($connection,$query) or die ("You couldn’t execute query");
//First echo the table with all your data as you want
echo "
<div class='admin-table'>
<table cellspacing='15'>
<tr>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
//Fetch all rows for each user
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
<tr>
<td>$USER_LASTNAME</td>
<td>$USER_FIRTSNAME</td>
<td>$USER_PHONE</td>
<td>$USER_ADDRESS</td>
<td>$USER_POSTCODE</td>
<td>$USER_DOB</td>
<td>$USER_EMAIL</td>
<td>$USER_PASSWORD</td>
<td>$USER_ROLE</td>
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>
<td><a href='#openModal?id=".$USER_ID."'>Edit</a></td>
<div id='openModal?id=".$USER_ID."' class='modalDialog'>
<div><a href='#close' title='Close' class='close'>X</a>
<h2>".$USER_ID."</h2>
<p>You can have additional details here.</p>
</div>
</div>
</tr>
<tr>
<td colspan ='15'><hr></td>
</tr>";
}
echo"
</table>
</div>";
?>
Try this:
echo '<a href="#openModal?id='.$VARIABLE.'">';
Update:
echo '<td>Edit</td>\n';
echo '<td>Delete</td>\n';
any reason you can't use onclick ?
<a href="#" onclick="myJsFunc();">
<script>
function myJsFunc() {
//code to open modal
}
</script>
UPDATE
If i have understood you correct you are trying to make a table showing all users and then when the admin clicks at element a modal pop ups providing additional info for the particular user.
<?php
$query = "SELECT * FROM USER;";
$result = mysqli_query ($connection,$query) or die ("You couldn’t execute query");
//First echo the table with all your data as you want
echo "
<div class='admin-table'>
<table cellspacing='15'>
<tr>
<td><h3>Last Name</h3></td>
<td><h3>Name</h3></td>
<td><h3>Phone</h3></td>
<td><h3>Address</h3></td>
<td><h3>Postcode</h3></td>
<td><h3>Date of Birth</h3></td>
<td><h3>Email</h3></td>
<td><h3>Password</h3></td>
<td><h3>Role</h3></td>
</tr>";
//Fetch all rows for each user
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
<tr>
<td>$USER_LASTNAME</td>
<td>$USER_FIRTSNAME</td>
<td>$USER_PHONE</td>
<td>$USER_ADDRESS</td>
<td>$USER_POSTCODE</td>
<td>$USER_DOB</td>
<td>$USER_EMAIL</td>
<td>$USER_PASSWORD</td>
<td>$USER_ROLE</td>
<td><a href='admin_user.php?id=".$USER_ID."'>Delete</a></td>
<td><a href='#openModal".$USER_ID."'>Edit</a></td>
</tr>
<tr>
<td colspan ='15'><hr></td>
</tr>";
}
echo"
</table>
</div>";
//Fetch again the rows to make the modals with the edit info
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo '
<div id="openModal'.$USER_ID.'" class="modalDialog">
<div>X
<h2>'.$USER_ID.'</h2>
<p>You can have additional details here.</p>
</div>
</div>';
}
?>
Old answer before the comments
It seems that single quotes and/or double quotes aren't escaped properly.
Also remember that in PHP string concatenation is made using " . " (dot) and in JavaScript using " + " (plus).
Update 1
I think that if you use the following you will be ok.
echo '<td>Delete</td>';
echo '<td>Edit</td>';
Update 2
Don't forget to add $variable at div too so <a> and div id are the same the same. E.g.
echo '<div id="openModal'.$variable.'" class="modalDialog"></div>';
I have a table function (table_view.php)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test_coding_rosa/table_design2.css">
</head>
<body>
<?php
$row_id="";
if($_GET['page']==1 || isset($_GET['page'])==false){
$row_id=1;
}elseif (isset($_GET['page']) && $_GET['page']>1) {
$row_id=($_GET['page']-1)."1";
}
$doc = JFactory::getDocument();
$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');
$doc->addScriptDeclaration('
jQuery(document).ready( function () {
jQuery("#main-table").DataTable();
});
');
?>
<h1><?php echo $this->title ?></h1>
<table id="main-table" border="<?php echo $this->tableBorder ?>" class="display" <?php if(!empty($this->tableWidth)) echo 'width="'.$this->tableWidth.'"';?> >
<thead>
<?php
if(!$this->hideHeaderTable)
{
if($_GET['t']!='maklumat_ringkas'){
echo "<tr><th width='10px'>Bil</th>";
}
foreach($this->tableData[0] as $key=>$tableHeader)
{
?>
<th width="<?php echo $this->tableData[1][$key] ?>" scope="col"><?php echo $this->tableData[0][$key] ?></th>
<?php
}
?>
</tr>
</thead>
<?php
}
$lenData = count($this->tableData);
for ($j=3;$j < $lenData; ++$j)
{
?>
<tbody>
<tr class="centertable" <?php if($j % 2==1) echo 'bgcolor="#EFF4FB"'?>><?php if($_GET['t']!='maklumat_ringkas'){echo "<td>".$row_id++."</td>";}?>
<?php
foreach($this->tableData[0] as $key=>$tableHeader)
{
?>
<td width="<?php echo $this->tableData[1][$key] ?>" <?php echo $this->tableData[2][$key] ?>><?php echo stripslashes($this->tableData[$j][$key]) ?></td>
<?php
}
?>
</tr>
</tbody>
<?php
}
?>
</table>
</body>
</html>
This table_view.php is the default table for all data in the site. As you can see in the photo below, there are multiple tables being called from table_view.php.
The problem here is, I wanted to use DataTables.net to include the pagination of the tables. However, only the first table has been successfully implemented with DataTables.net plugin.
How can I implement it on all of the tables? Since all the tables are being called from the same function file (table_view.php), the table id is the same.
UPDATED declaration
$doc = JFactory::getDocument();
$doc->addScriptDeclaration("
jQuery('[id='main-table']').each(function(i,e) {
var id=jQuery(this).attr('id');
jQuery(this).attr('id', id+'_'+i);
jQuery(this).addClass('datatable-identifier');
}); ");
$doc->addScript('http://code.jquery.com/jquery-1.11.0.min.js');
$doc->addScript('http://datatables.net/download/build/nightly/jquery.dataTables.js');
$doc->addScriptDeclaration('
jQuery(document).ready( function () {
jQuery(".datatable-identifier").dataTable();
} );
Having multiple elements with the same id is a very bad habit :) You should really try to avoid it. Though HTML is forgiving, it results as you see in all kind of problems when trying to access elements in javascript.
If it is impossible to avoid, you could run the following function before calling dataTable() :
jQuery('[id="main-table"]').each(function(i,e) {
var id=jQuery(this).attr('id');
jQuery(this).attr('id', id+'_'+i);
jQuery(this).addClass('datatable-identifier');
});
This will rename the table id's to main-table_1, main-table_2 and so on. The class datatable-identifier is just a dummy class used when initializing the dataTables, change your code to :
jQuery(document).ready( function () {
jQuery(".datatable-identifier").dataTable();
});
I have fixed the problem of the table working within a form. I just added an extra <td> field and created a hidden input field within it that will POST a separate tipID for each tip in the table. The entire table is also wrapped with the form tag to get the tipID to POST to the next page.
Now I need to know how make each individual table row send the data from the form kind of like each one being a button or making a hidden button click onclick of one of these table rows.
<form method="post" action="tips.php">
<div id="tippanel">
<table id="tippabl">
<tbody>
<?php if(!empty($tips))
while ($recd = mysql_fetch_array($tips, MYSQL_ASSOC)) {
echo "<tr> <td class='tiptxt' >"; echo $recd['tip_desc']; echo "</td> <td class='tiptime'>";
echo "<span>".date('H:i', strtotime($recd['datetime']))."</span>"; echo "</br>";
echo date('m-d-y', strtotime($recd['datetime'])); echo"</td><td><input type=";
echo '"hidden" '; echo 'name='; echo '"tip_id" '; echo 'value="';
echo ($recd['tip_id']); echo'"></td></tr>';
}
?>
</tbody>
</table>
</div>
</form>
My next page will use the query below and echo the full tip_desc since a tip can be several hundred characters. It will also have a text area in which an admin can send a message back to the original user.
My PHP and query should look like this on the next page:
<?php
$tipID = $_POST['tipID'];
mysql_query="SELECT * FROM tips WHERE tipID = $tipID";
?>
Just surround your table into a form, place a hidden input field into it.
<form action="tips.php">
<input name="tipID" type="hidden" value="id" />
<div id="tippanel">
<table id="tippabl">
<tbody>
<?php
if(!empty($tips)) {
while ($recd = mysql_fetch_array($tips, MYSQL_ASSOC)) {
echo "<tr> <td class='tiptxt' >"; echo $recd['tipDescription'];
echo "</td> <td class='tiptime'>";
echo "<span>".date('H:i', strtotime($recd['dateTime']))."</span>";
echo "</br>"; echo date('m-d-y', strtotime($recd['dateTime']));
echo"</td></tr>";
}
}
?>
</tbody>
</table>
</div>
</form>
Have a look at this to make your rows clickable. Working demo
function addRowHandlers() {
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
Credit: SolutionYogi
Ref: Adding an onclick event to a table row