Develop Reference

Timer in Every Row of Table

I would like to add a running time/ stopwatch for every row showing the time spent in each process. The timer just shows at the first row and nothing on the rest.
The date to be used would come from a database.
Here's a snippet of my code for reference:
<?php
echo "<h2>On-Going Repairs</h2>";
$query = "SELECT tca_ro, tca_csplate, tca_name, tca_start, tca_process FROM tcs.tca_bp_process WHERE date(tca_start) = curdate() AND tca_status = 'Started'";
if($query_result = mysqli_query($link,$query)){
if(mysqli_num_rows($query_result) > 0)
{
echo "<div class='card-body'>";
echo "<div class='table-responsive'>";
echo "<table class='table table-bordered' id='dataTable' width='100%' cellspacing='0'>";
echo "<thead>";
echo "<tr>";
echo "<th>RO NUMBER</th>";
echo "<th>CS NUMBER</th>";
echo "<th>TECHNICIAN</th>";
echo "<th>START</th>";
echo "<th>PROCESS</th>";
echo "<th>DURATION</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = mysqli_fetch_array($query_result))
{
echo "<tr>";
echo "<td>".$row['tca_ro']."</td>";
echo "<td>".$row['tca_csplate']."</td>";
echo "<td>".$row['tca_name']."</td>";
echo "<td><input type='text' id='date' value='".$row['tca_start']."'</td>";
echo "<td>".$row['tca_process']."</td>";
echo"<td><div id='data'></div></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";
echo "</div>";
}
}
?
<script type="text/javascript">
function func(){
var dateValue = document.getElementById("date").value;
var date = Math.abs(new Date(dateValue).getTime() / 1000).toFixed(0);
var currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
var diff = currentDate - date;
var hours = Math.floor(diff/3600) % 24;
var minutes = Math.floor(diff/60) % 60;
var seconds = diff % 60;
var time_str = hours + " : " + minutes +" : "+ seconds
document.getElementById("data").innerHTML =hours+":"+minutes+":"+seconds;
}
func();
setInterval(func, 1000);
</script>
Hope you can help me out. Thank you in advance

You have no need for Timer as they are in the Java programming language. All you need to do is display the values from a database.
Assuming you have start and end times in tca_start and tca_end, and duration in tca_duration just add lines as
echo "<td>".$row['tca_start']."</td>";
echo "<td>".$row['tca_end']."</td>";
echo "<td>".$row['tca_duration']."</td>";
If that is not what you are looking for, maybe enhance you question.

how to export html table to excel, with pagination

I have a form which displays mysql data in the form of an HTML table, using pagination of 5 records per page. I'm trying to export my table to excel, but it's only exporting data of the rows that are currently show, meaning if there are 20 rows, it only shows the first 5 as those get displayed. How can I make it export the one's that are not being displayed but still part of the search? I saw a few other people with a similar question but none have answers( How to export all HTML table rows to Excel file from a paginated table?). Hopefully I can get one!
<?php
if(isset($_GET['submit']) || isset($_GET['page'])){
// Setting up the Pagination below
echo '<center>';
$page_query = "SELECT * FROM tbl_call_log_detail ";
$page_query .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ";
$page_result = mysqli_query($conn, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
$start_loop = $page;
$difference = $total_pages - $page;
if($difference <= $total_pages){
$start_loop = $total_pages - $difference;
}
$end_loop = $start_loop + 2;
if($end_loop > $total_pages){
$end_loop = $total_pages;
}
if($difference > $total_pages){
$end_loop = $total_pages;
}
echo '<div class = "center">';
echo '<div class = "pagination">';
if($page > 1){
echo "<a href= 'dealer_call_log.php?page=1".$urlparameter."'>First</a>";
echo "<a href= 'dealer_call_log.php?page=".($page - 1).$urlparameter."'> << </a>";
}
for ($i = $start_loop; $i <= $end_loop; $i++){
echo "<a href= 'dealer_call_log.php?page=".$i.$urlparameter."'>".$i."</a>";
}
if($page < $end_loop){
echo "<a href= 'dealer_call_log.php?page=".($page + 1).$urlparameter."'> >> </a>";
echo "<a href= 'dealer_call_log.php?page=".$total_pages.$urlparameter."'>Last</a>";
}
if($page < 1){
$page = 1;
}
echo '</div>';
echo '</div>';
echo '<br>';
$sql = "SELECT Name, SFID, Comment, Time FROM tbl_call_log_detail
WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='')
ORDER BY Time DESC LIMIT $start_from, $record_per_page ";
$result = mysqli_query($conn, $sql);
$row = mysqli_num_rows($result);
$all_property = array();
echo "<table class = 'data-table' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table'>
<tr class = 'data-heading'>";
while($property = mysqli_fetch_field($result)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property, $property ->name);
}
echo '</tr>';
while ($row = mysqli_fetch_array($result)){
echo '<tr>';
foreach($all_property as $item){
echo '<td> '. $row[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
echo '<br>';
?>
// This is what is getting the current rows, but not all
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table').outerHTML));" value = "Export into excel" />
<?php
}
?>
UPDATE: Found the answer I was looking for I simply ran a new sql query without the LIMIT clause and stored it in a hidden table. I then use the hidden table to export data
// SQL and hidden table for exporting to excel
$page_query2 = "SELECT * FROM tbl_call_log_detail ";
$page_query2 .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ORDER BY TIME DESC ";
$page_result2 = mysqli_query($conn, $page_query2);
$row2 = mysqli_num_rows($page_result2);
$all_property2 = array();
echo "<table class = 'data-table2' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table2' hidden>
<tr class = 'data-heading2'>";
while($property = mysqli_fetch_field($page_result2)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property2, $property ->name);
}
echo '</tr>';
while ($row2 = mysqli_fetch_array($page_result2)){
echo '<tr>';
foreach($all_property2 as $item){
echo '<td> '. $row2[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
?>
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table2').outerHTML));" value = "Export into excel" />
<?php
}
?>

You can use JQuery table2excel plugin following is the link
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
Try following code pen to only JavaScript
https://codepen.io/kostas-krevatas/pen/mJyBwp

Toggle onclick between ascending en descending date using PHP

I have got this problem. I am trying to make a function where I can sort results by dates in a table. So far I got this:
function wedstrijdenClub (){
$laMatches = WaterpoloAPI::call("Matches", "getMatches", Array(
"",
"",
isset($_GET["ClubId"]) ? $_GET["ClubId"] : "",
"",
"",
));
$asc = $laMatches;
$desc = $laMatches ;
// Sort Matches ascending
usort($desc, function($a, $b) {
return stringToUnix($a->Date) - stringToUnix($b->Date);
});
// Sort Matches descending
usort($asc, function($a, $b) {
return stringToUnix($b->Date) - stringToUnix($a->Date);
});
echo '<div class="asc">'.implode('<br />',$asc).'</div>' ;
echo '<div class="desc">'.implode('<br />',$desc).'</div>' ;
echo "<h6 id='rcorners' style='background-color:#3db7e4; padding: 1rem; color:white;'><strong>Wedstrijden</strong></h6>";
echo "<table class='hover'>";
echo "<tbody >";
$lnToday = strtotime(date("d-m-Y"));
$lcCurrent = "";
foreach($laMatches as $loMatch) {
if(stringToUnix($loMatch->Date) < $lnToday) {
if($lcCurrent != $loMatch->Date) {
echo "<thead>";
echo "<tr >";
echo "<th class='text-center date'>";
echo "$loMatch->Date</th>";
echo "<th class='text-center'></th>";
echo "<th class='text-center'></th>";
echo "<th class='text-center'></th>";
echo "</tr>";
echo "</tr>
</thead>";
}
$lcCurrent = $loMatch->Date;
}
echo "<tr class='text-center'>";
echo "<td >$loMatch->Time</td>";
echo "<td>$loMatch->HomeTeam </td>";
echo "<td><strong><a href='..\wedstrijd?MatchId=".$loMatch->Id."'>$loMatch->ResultHome - $loMatch->ResultGuest </a></strong></td>";
echo "<td> $loMatch->AwayTeam</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
}
in my php page
<style> div.asc, { display:block ; } div.desc { display:none ; } </style>
<div class="large-12 columns block asc"><?php wedstrijdenClub(); ?></div>
<div class="large-12 columns block desc"><?php wedstrijdenClub(); ?></div>
<a class="asc">Asc</a>
<a class="desc">Desc</a>
and in my footer
<script>
jQuery(document).on('click','a.asc, a.desc',function(e){
e.preventDefault() ;
jQuery('div.block').hide() ;
jQuery('div.'+jQuery(this).attr('class')).show() ;
}) ;
</script>
Where I call a list of matches. It descent and ascent ...but I want it on a click event ...how I am going to do this? I am still learning ...so sorry if it is a silly question.

The JS part you need is really simple i think :
jQuery(document).on('click','a.asc, a.desc',function(e){
e.preventDefault() ;
jQuery('div.block').hide() ;
jQuery('div.'+jQuery(this).attr('class')).show() ;
}) ;
div.asc, { display:block ; }
div.desc { display:none ; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="block asc">A B C D E F</div>
<div class="block desc">F E D C B A</div>
<a class="asc">Asc</a>
<a class="desc">Desc</a>
Just be carefull with your php part : when you use usort function, the value of $laMatches is changed, so calling 2 times usort will only show you the last results.
You need to make copies of your $laMatches and sort the copies :
$laMatches = Array('red','blue','green','brown','yellow') ;
$asc = $laMatches ;
$desc = $laMatches ;
usort($desc, function($a, $b) {
return strlen($a) - strlen($b) ;
});
usort($asc, function($a, $b) {
return strlen($b) - strlen($a) ;
});
echo '<div class="asc">'.implode('<br />',$asc).'</div>' ;
echo '<div class="desc">'.implode('<br />',$desc).'</div>' ;

count lines in array and split into 2 divs php

I have a table in my website with 4 columns. I'm using ACF custom field to enter my content.
$string = get_field('projets');
my strings are split into two divs, date_index & texte_index... date_index display the date, and text_index displays the text, so each strings is split when finding a blank space.
like this :
here is the content I enter = 2013-07 PARIS COLLÈGE DE FRANCE
and here is how it is displayed :
<div class="date_index">2013-07</div><div class="texte_index">PARIS COLLÈGE DE FRANCE</div>
it works fine.
then my frist array is split into two column, when first column have 130 lines, then the next lines are displayed in another column.
here is my code :
<div class="columns_projets_1">
<p><?php
$string = get_field('projets');
$array = explode("\n", $string);
for($i = 0; $i <130; $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
?></p>
</div>
<div class="columns_projets_2">
<p><?php
$string = get_field('projets');
$array = explode("\n", $string);
for($i = 130; $i <count($array)-1; $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
?></p>
</div>
then I have a 3rd column, here is the code :
<div class="columns_conferences">
<p><?php
$string = get_field('conferences');
$array = explode("\n", $string);
for($i = 0; $i <300; $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
?></p>
</div>
and my 4th column :
<div class="columns_monographies">
<p><?php
$string = get_field('monographies');
$array = explode("\n", $string);
for($i = 0; $i <300; $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
?></p>
</div>
first of all I would like to delete the condition ( $i <300 )on the 3rd and 4th column, I don't want to have limits in this two columns, but when I try to delete the condition nothing is displayed...
secondly I would like to count the lines in the 3rd column, and this number will be the limit of my first column. so my 1st and 3rd column will have the same lines number.
do you understand what I mean ?
it should be something like that but I can't manage to make it work :
in my 1st column :
for($i = 0; $i <130; $i++){
instead of 130, the number of lines of my 3rd column array.
and for 2nd column ;
for($i = 130; $i
instead of 130, the number of lines of my 3rd column array.
I really hope you can help me with this,
here is a github link :
https://gist.github.com/mattieumoreau/7431037
thanks a lot for your help,

To fix your first issue, use sizeof(array) rather than a specific number, e.g.:
for($i = 0; $i < sizeof($array); $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
Edit:
Your third column would look a bit like this:
<div class="columns_conferences">
<p><?php
$string = get_field('conferences');
$array = explode("\n", $string);
for($i = 0; $i < sizeof($array); $i++){
$dateAndText= explode(' ', $array[$i], 2);
echo '<div class="date_index">'.$dateAndText[0].'</div>';
echo '<div class="texte_index">'.$dateAndText[1].'</div>';
}
?></p>
</div>

There are a few issues going on here.
If you delete the condition, either your for loop is erroring out or it's going on forever (depends on how you're trying to delete it). To get all the records, you want for ($i = 0; $i < count($array); $i += 1) { ...
To limit the length of the first column of 'projets' to the length of 'conferences', you'll need to pick up the data ahead of time, then display it. Here's what I mean:
$projets = explode("\n", get_field('projets'));
$conferences = explode("\n", get_field('conferences'));
$monographies = explode("\n", get_field('monographies'));
// Now we want to limit the length of the first column of projets (col 1) to the
// length of conferences (col 3).
$projets = array_chunk($projets, count($conferences)); // Split the projets into a set of arrays of the right length.
$projets1 = array_shift($projets); // Grab the first one... that's the data for the first column.
$projets2 = array_reduce($projets, 'array_merge', array()); // Merge the remaining arrays into a single array for display.
and then :
function displayDateAndText ($obj)
{
$dateAndText = explode(' ', $obj, 2);
echo "<div class=\"date_index\">{$dateAndText[0]}</div>";
echo "<div class=\"texte_index\">{$dateAndText[1]}</div>";
}
function displayRecords ($records)
{
echo '<p>';
$limit = count($records);
for ($i = 0; $i < $limit; $i += 1)
{
displayDateAndText($records[$i]);
}
echo '</p>';
}
?>
<div class="columns_projets_1">
<?php
displayRecords($projets1);
?>
</div>
<div class="columns_projets_2">
<?php
displayRecords($projets2);
?>
</div>
<div class="conferences">
<?php
displayRecords($conferences);
?>
</div>
<div class="monographies">
<?php
displayRecords($monographies);
?>
</div>

Random displays of members images

If I have an array of 50 spots, each spot contains 5 images, I want to randomly display each spot in a table format. One spot per row (5 images) which will be 50 rows in total. Using no database!
<?php
$allImages = array('Image1.jpg','Image2.jpg','Image3.jpg','Image4.jpg');
echo '<table>';
// loop for 12 rows
for($j=0; $j<12; $j++) {
echo '<tr>';
// loop to make 5 columns, 1 column for each image
for($i=0; $i<5; $i++) {
echo '<td>';
$img = $allImages[rand(0,3)];
echo '<img src="'.$img.'">';
echo '</td>';
} echo '</tr>';
}
echo '</table>';
?>

try this:
<?php
$allImages = array('Image1.jpg','Image2.jpg','Image3.jpg','Image4.jpg',
'Image2.jpg','Image3.jpg','Image4.jpg','Image2.jpg',
'Image3.jpg','Image4.jpg','Image2.jpg','Image3.jpg',
'Image4.jpg');
shuffle ( $allImages );
echo '<table><tr>';
for($j=0; $j<count($allImages); $j++) {
echo '<td>';
echo '<img src="'.$allImages[$j].'">';
echo '</td>';
if(($j+1)%5==0) echo "</tr><tr>";
}
echo '</tr></table>';
?>

How about this?
<?php
$allImages = array(
array ('Image01.jpg', 'Image02.jpg', 'Image03.jpg', 'Image04.jpg', 'Image05.jpg'),
array ('Image11.jpg', 'Image12.jpg', 'Image13.jpg', 'Image14.jpg', 'Image15.jpg'),
//.... So on upto 50 slots
array ('Image501.jpg', 'Image502.jpg', 'Image503.jpg', 'Image504.jpg', 'Image505.jpg')
);
$spot_indexes = range(0,2,1); //in your case limit is 50
shuffle($spot_indexes);
foreach($spot_indexes as $index) {
$spot_images = $allImages[$index];
foreach($spot_images as $image) {
echo '<img src ="' .$image. '" height="150px" width="100px" /> ' ;
}
echo '<br>';
}
?>