i have a table A . On clicking any row of this table,I need to display data of other table B(having relational keys s_id).
Eg:
Table A:
id Name Age
1 abc 12
2 xyz 13
Table B:
id gender add
1 F aghg
2 M qwer
I want my output as: Table A should be printed as it is, and on click table A rows, Eg clicking on 1st row of table A should give 1st row of Table B, Clikin on 2nd row of A should give 2nd row of B and so on. Is it possible? Plz plz plz help me
The code I have is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>
<body>
<table border="1"id="report">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Place</th>
</tr>
<tr>
<td>uda</td>
<td>22</td>
<td>F</td>
<td>lore</td>
</tr>
<tr>
<td colspan="4">
blah blah
<br />
:(
</td>
</tr>
<tr>
<td>ish</td>
<td>20</td>
<td>F</td>
<td>ore</td>
</tr>
<tr>
<td colspan="4">
<table width="335" s >
<tr>
<td>uda</td>
<td>aixa</td>
<td>diidi</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This code prints the data that is typed in the form of and .Also problem here is when I try to print the rows using mysql query it doesnt work.
<?php
$result = mysql_query("SELECT * FROM A");
while($row=mysql_fetch_array($result)){ ?>
<td><?php echo $row["source_id"]; ?></td>
<td><?php echo $row["escl_status"]; ?></td>
<td><?php echo $row["escl_notice"]; ?></td>
</tr>
<?php
}
?>
Please please help me :(
You need to add <tr> in while loop like,
<?php
$result = mysql_query("SELECT * FROM A");
while($row=mysql_fetch_array($result)){ ?>
<tr> <!-- add this tr -->
<td><?php echo $row["source_id"]; ?></td>
<td><?php echo $row["escl_status"]; ?></td>
<td><?php echo $row["escl_notice"]; ?></td>
</tr>
<?php
}
?>
Also change .odd to :odd in your jquery selector,
$("#report tr:odd").click(function(){ // :odd not .odd
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
Related
I have a table query from DB. This table has few info from the DB. The rest of the info I want is to be shown when I click the collapsible. So for that I want the collapsible row just after each of the queried row. Below is my code.
It is creating as many collapsible as queried rows but all rows are together and all collapsible are together. Also The collapsible are coming before the queried rows though it should be under the queried rows.
<table class="blueTable">
<thead>
<tr>
<th>Broadband ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Circle</th>
<th>SSA</th>
<th>SDCA</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($searchqry)):?>
<tr>
<td><?php echo $row['bb_id'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['phone'];?></td>
<td><?php echo $row['circle'];?></td>
<td><?php echo $row['ssa'];?></td>
<td><?php echo $row['sdca'];?></td>
</tr>
<tr><button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</tr>
<?php endwhile;?>
</tbody>
</table>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++)
{
coll[i].addEventListener("click", function()
{
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight)
{
content.style.maxHeight = null;
}
else
{
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
<tr>
<td colspan="8">
<button class="collapsible">Open Section 3</button>
<div class="content">
<p>Lorem ipsum</p>
</div>
</td>
</tr>
Needed to put a cell inside the row.
You are missing a <td> inside of the second <tr>.
I want to have my table beautifully display with sorting options. I'm using PHP to retrieve records from a MySQL database. I learn of datatables and saw that they are pretty useful for such purpose.
Now, the problem is whenever I use PHP to generate data from the database and dynamically display them in a table it works perfectly with all the datatables styles applying to the table, but I can't get the sorting and pagination features of dataTables to work. Here is how my table displays:
How do I enable the sorting and pagination features that dataTables provides?
Here are the scripts to dataTables and the php code I wrote:
<!-- DataTables CSS -->
<link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">
<table class="table table-striped table-bordered table-hover" id="example">
<thead>
<tr>
<th>First Name</th>
<th>Surname</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Address</th>
<th>Nationality</th>
<th>County</th>
<th>Student Type</th>
<th>Class</th>
<th colspan="3">Operations</th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT student_id, first_name, cell_number, middle_name, surname, gender, date_of_birth, address, nationality, county, student_type, class_name
from students
INNER JOIN classes
ON students.class_id = classes.class_id";
if($result = mysqli_query($connection, $query)){
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?php echo htmlentities($row['first_name']) ?></td>
<td><?php echo htmlentities($row['surname']) ?></td>
<td><?php echo htmlentities($row['gender']) ?></td>
<td><?php echo htmlentities($row['date_of_birth']) ?></td>
<td><?php echo htmlentities($row['address']) ?></td>
<td><?php echo htmlentities($row['nationality']) ?></td>
<td><?php echo htmlentities($row['county'])?></td>
<td><?php echo htmlentities($row['student_type'])?></td>
<td><?php echo htmlentities($row['class_name'])?></td>
<td align="center"><a class="page_anchor" href="edit_student.php?student=<?php echo urlencode($row['student_id']); ?>">Edit</a></td>
<td align="center"><a class="page_anchor" href="create_grades.php?student=<?php echo urlencode($row['student_id']); ?>">Grades</a></td>
<td align="center"><a class="page_anchor" href="student_details.php?student=<?php echo urlencode($row['student_id']); ?>">Details</a></td>
</tr>
<!-- closing the while loop -->
<?php }?>
</tbody>
<!-- closing the if mysqli_num_rows if statement -->
<?php } else { echo "No record found"; }?>
<!-- closing the if $result = mysqli_query($connection, sql) if statement -->
<?php } else {
die("Database query failed. ". mysqli_error($connection));
} ?>
</table>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="vendor/datatables-responsive/dataTables.responsive.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable({
responsive: true
});
});
</script>
Here are the errors I'm receiving from the JS console:
Uncaught TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
at Function.each (jquery.min.js:2)
at r.fn.init.each (jquery.min.js:2)
at r.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at r.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166)
at HTMLDocument.<anonymous> (index.php:429)
at j (jquery.min.js:2)
Uncaught TypeError: Cannot read property 'defaults' of undefined
at f (dataTables.bootstrap.min.js:5)
at dataTables.bootstrap.min.js:8
at dataTables.bootstrap.min.js:8
Here is a warning that I also saw in the JS console:
jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
at HTMLTableCellElement.<anonymous> (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:236)
at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
at HTMLTableElement.<anonymous> (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:192)
at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
at r.fn.init.m [as dataTable] (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:82:388)
at r.fn.init.h.fn.DataTable (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:166:245)
at HTMLDocument.<anonymous> (http://localhost/SchoolMate/index.php:429:23)
at j (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:29568) undefined
You're repeating tbody with each iteration. You should echo rows only not the tbody. Move it out of while loop.
You're showing more data columns in tbody than you have in thead i.e no of th != no of td
Edit:
Well, you can't achieve what you have shown since DataTables doesn't work like you want with colspan and rowspan. But you can do something like this:
<table class="jTable">
<thead>
<tr>
<th>Name</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td>Waleed</td>
<td>
<table>
<tr>
<td>View</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Output:
However, rendering nested tables is not suggested due to slow performance. But this will do the job.
This may come handy as well.
You are repeating your <tbody> tag with each iteration of your loop. Move this outside of your loop (along with the closing </tbody>) so there is only one instance of them in your table.
Your Number of td and th Tags must be same for dataTables to work.
So just add some empty th tags.. AND DONT USE COLSPAN while using datatables
In your case you need to add 2 extra th tags...
`<!-- DataTables CSS -->
<link href="vendor/datatables-plugins/dataTables.bootstrap.css"
rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="vendor/datatables-responsive/dataTables.responsive.css"
rel="stylesheet">
<table class="table table-striped table-bordered table-hover" id="example">
<thead>
<tr>
<th>First Name</th>
<th>Surname</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Address</th>
<th>Nationality</th>
<th>County</th>
<th>Student Type</th>
<th>Class</th>
<th>Operations</th> // DONT USE COLSPAN WHILE USING DATATABLES
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$query = "SELECT student_id, first_name, cell_number, middle_name, surname, gender, date_of_birth, address, nationality, county, student_type, class_name
from students
INNER JOIN classes
ON students.class_id = classes.class_id";
if($result = mysqli_query($connection, $query)){
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?php echo htmlentities($row['first_name']) ?></td>
<td><?php echo htmlentities($row['surname']) ?></td>
<td><?php echo htmlentities($row['gender']) ?></td>
<td><?php echo htmlentities($row['date_of_birth']) ?></td>
<td><?php echo htmlentities($row['address']) ?></td>
<td><?php echo htmlentities($row['nationality']) ?></td>
<td><?php echo htmlentities($row['county'])?></td>
<td><?php echo htmlentities($row['student_type'])?></td>
<td><?php echo htmlentities($row['class_name'])?></td>
<td align="center"><a class="page_anchor" href="edit_student.php?student=<?php echo urlencode($row['student_id']); ?>">Edit</a></td>
<td align="center"><a class="page_anchor" href="create_grades.php?student=<?php echo urlencode($row['student_id']); ?>">Grades</a></td>
<td align="center"><a class="page_anchor" href="student_details.php?student=<?php echo urlencode($row['student_id']); ?>">Details</a></td>
</tr>
<!-- closing the while loop -->
<?php }?>
</tbody>
<!-- closing the if mysqli_num_rows if statement -->
<?php } else { echo "No record found"; }?>
<!-- closing the if $result = mysqli_query($connection, sql) if statement --
>
<?php } else {
die("Database query failed. ". mysqli_error($connection));
} ?>
</table>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="vendor/datatables-responsive/dataTables.responsive.js">
</script>
<script>
$(document).ready(function() {
$('#example').DataTable({
responsive: true
});
});
</script> `
Need help...
I have 2 php file which are screen1.php and screen2.php
screen1.php consist of main data and screen2.php consist of history of main data.
Both main data and history store in 1 table.
How do I work if, i click main data in screen1.php it load history data from screen2.php into screen1.php
Thank you
If all the data is in the same table then you just need to include the data in your query? If you wanted to keep your query simple you could use Ajax
This looks like a job for Ajax.
You will need to include jquery library for this.
Page: main.php?user_id=4
<!----include Jquery library----->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!----include Jquery library----->
<title>Main Data</title>
</head>
<body>
<?php $sql="SELECT username, date, account_number, status
FROM table WHERE user_id=" . $_GET['user_id'] ;
//Do a prepared Statement to avoid SQL injection. Here I will just keep things simple
$user=$db->query($sql)->fetch();
?>
<table width="100%" border="1" id="main">
<tbody>
<th colspan="4">Main Data</th>
<tr>
<td align="center"><strong>Username</strong></td>
<td align="center"><strong>Date</strong></td>
<td align="center"><strong>Account Number</strong></td>
<td align="center"><strong>Status</strong></td>
</tr>
<tr>
<td><?php echo $user['username']//James Bond ?></td>
<td><?php echo $user['date']//18 Jan 2015 ?> </td>
<td><?php echo $user['account_number']//58241687929876 ?> </td>
<td><?php echo $user['status']//Active ?> </td>
</tr>
</tbody>
</table>
<button id="view_more">View more</button><!---give button a id--->
<div id="history">
<!------New data will be added here------>
</div>
<!------- THIS IS THE MAGIC PART ----------->
<script>
$(document).on('click','#view_more',function(){
//Event, button ID
$.ajax({
url:"view_history.php?user_id=<?php echo $_GET['user_id']; ?>"
//Link to history.php. Pass user_id to url
success:function(data){
$('#history').empty();
//empty history div if there is anything
$('#history').append(data).hide().fadeIn(500);
//And then append new data
}
});
});
</script>
<!------- THIS IS THE MAGIC PART ----------->
</body>
Page: history.php
<?php
$sql="SELECT type,date FROM table WHERE id=" . $_GET[user_id];
$history=$db->query($sql)->fetch();
?>
<table width="100%" border="1">
<tbody>
<th colspan="4">History of James Bond</th>
<tr>
<td align="center" width="50%"><strong>Type</strong></td>
<td align="center"><strong>Date</strong></td>
</tr>
<tr>
<td><?php echo $history['type'];//Fund ?></td>
<td><?php echo $history['date'];//18 Jan 2015 ?></td>
</tr>
<tr>
<td><?php echo $history['type'];//Refund ?></td>
<td><?php echo $history['date'];//21 Jan 2014 ?></td>
</tr>
<tr>
<td><?php echo $history['type'];//Refund ?></td>
<td><?php echo $history['date'];//22 Jan 2014 ?> </td>
</tr>
</tbody>
</table>
Please be careful take care of security measures.
Good Afternoon,
I have 3 foreach loops on my page, the first gets the teams, the second gets each person in the team, and the third gets each unique reference to a task that the agent has completed. I have collected this data and it is being displayed fine. I now want to add some JQuery to it so it will hide the agents and references unless the relevant team or agent is clicked on.
So if I load the page everything will be hidden apart from the teams, when I click on a team it will show the agents, when I click on an agent it will show the references.
I am having trouble assigning unique ID's to each row and finding those in the JQuery script.
Here is my code...
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $aTeamData['iBusinessStreamId'];?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId]?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $aPropertyData['iUserId'];?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I have given each of the rows a unique class by adding in the unique identifier from the database. I just dont know how to find these within the Jquery script.
EDIT:
Maybe not explained myself properly, I would like help with how to set up this script but obviously a lot better.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick',function(){
$('.Agent').toggle('show');
$('.Property').toggle('show');
});
});
</script>
But in this case it will show/hide all of the rows as they will all have the same id's, whereas now I have added on the unique id on the end with the php code in the class, I dont know how to call those as they all are called different classes.
So if I click on TeamClick1, it shows the actual rows for that team (Agent1), and not all of them. but obviously I cant type out all of the unique id's I just dont know how to get them from the php in JQuery.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick(UNIQUE ID)',function(){
$('.Agent(UNIQUE ID)').toggle('show');
$('.Property(UNIQUE ID)').toggle('show');
});
});
Hope this makes sense.
I am hasty but it is like this
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $iBusinessStreamId;?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId; ?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId2 => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $iUserId2 ;?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I'm putting the identifiers in classes, but if you want put in IDs you can, is the same thing, like this id="<?php ... ?>"
I have a table that displays SQL results, however I would like the table to display certain results, and display more upon a click, below the table in a div tag. So far I have this code that displays,'title' and 'email' and the 3rd column which will trigger a JS function and display 'details' in a div tag... How do I use JavaScript to display the specific details and hide those details when a second row details is clicked and replace the first 1?
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td>More details...</td>
</tr>
EDITED:
After a comment I received, here is my entire code of the table with the div element with the id "details"
<table>
<tr>
<td><strong>Investment Title</strong></td>
<td><strong>Email</strong></td>
<td><strong>Details</strong></td>
</tr>
<?php
// Start looping table row
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td>More details...</td>
</tr>
<?php
// Exit looping and close connection
}
mysql_close();
?>
<tr>
</tr>
</table>
<div id="detail"></div>
Im not sure if this is what you want to do but you can try something like this. I hope this helps
HTML
<table>
<tr>
<td><strong>Investment Title</strong></td>
<td><strong>Email</strong></td>
<td><a href='#' id='show_details'>More Details</a></td>
</tr>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['email']; ?></td>
<td id='details'><?php echo $rows['details'];?></td>
</tr>
</table>
Javascript - JQuery
$(document).ready(function()
{
$('#details').hide(); //on ready hide the td details
$('#show_details').click(function()
{
$('#details').show();
});
});
UPDATE
YOU MEAN LIKE THIS SEE MY FIDDLE
Without JQuery:
HTML
<td id='details'>The details are in here...</td>
<td id='details1'>The other details are in here...</td>
Javascript
document.getElementById('details').style.display = 'table-cell';
document.getElementById('details1').style.display = 'none';