Toggle onclick between ascending en descending date using PHP - javascript

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>' ;

Related

Struggling to increment table column in fives up to a certain number

So basically if $minimum was 30 and $maximum was 40. I wanted the left hand column to from 30 then 35 then 40 while multiplying the values together. I would love some help or even advice.
I added a picture with the result after clicking submit in the html form.
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$costOne = trim($_GET["c1"]);
$costTwo = trim($_GET["c2"]);
$costThree = trim($_GET["c3"]);
$costFour = trim($_GET["c4"]);
$costFive = trim($_GET["c5"]);
$minimum = trim($_GET["min"]);
$maximum = trim($_GET["max"]);
}
echo '<table>';
echo '<tr>';
echo '<th>Cost per person<br>Party size</th>';
echo "<th>$costOne</th>";
echo "<th>$costTwo</th>";
echo "<th>$costThree</th>";
echo "<th>$costFour</th>";
echo "<th>$costFive</th>";
echo '</tr>';
for ($col=$minimum; $col <= $maximum; $col+5) {
echo "<tr>";
echo "<td>$col</td>";
echo "<td>$col*$costOne</td>";
echo "<td>$col*$costTwo</td>";
echo "<td>$col*$costThree</td>";
echo "<td>$col*$costFour</td>";
echo "<td>$col*$costFive</td>";
echo "</tr>";
}
echo '</table>';
?>
Result:
Catering costs

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

PHP Pagination set 25 result per page

i am facing problem, my php show all pages in row and its increasing day by day as i upload data on my sql. I just want 25 page result on page and other for click to next.
<?php
if(isset($page))
{
$result = mysql_query("select Count(*) As Total from store_urls");
$rows = mysql_num_rows($result);
if($rows)
{
$rs = mysql_fetch_assoc($result);
$total = $rs["Total"];
}
$totalPages = ceil($total / $perpage);
if($page <=1 ){
echo "<span id='page_links' style='font-weight: bold;float:left;'>Prev</span>";
}
else
{
$j = $page - 1;
echo "<span style='float:left;'><a style='padding: 8px;' id='page_a_link' href='url_lists.php?page=$j'>< Prev</a></span>";
}
for($i=1; $i <= $totalPages; $i++)
{
if($i<>$page)
{
echo "<span><a style='float:left;padding: 8px;' id='page_a_link' href='url_lists.php?page=$i'>$i</a></span>";
}
else
{
echo "<span id='page_links' style='font-weight: bold;float:left;'>$i</span>";
}
}
if($page == $totalPages )
{
echo "<span id='page_links' style='font-weight: bold;'>Next ></span>";
}
else
{
$j = $page + 1;
echo "<span><a id='page_a_link' style='float:left;padding: 8px;' href='url_lists.php?page=$j'>Next</a></span>";
}
}
?>

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>';
}
?>

get id of a cell in a table inside a div (JS and HTML)

Hi I have a php script that draws a table subject to certain conditions. When the table is drawn it is inside a div called ‘window’ and the table is called ‘visi’ I then want to use the code below to get the id’s of each cell in the table. I can get the class name no problem but get absolutely nothing from the id. Can anyone give me an idea of what i am doing wrong?. I have tried a similar peice of code on a table that is not inside a div and it works fine. Any help would be great and I hope the code makes sense.
function confirm_allocate() {
var msg = ""
var tab = document.getElementById('visi');
var r = tab.rows.length
for (i=0; i<r; i++){
cc = tab.rows.cells.length
for (col=0; col<cc; col++){
x=document.getElementById('visi').rows.cells;
iden = x[col].className
ref = x[col].id
msg += "Class =" + iden + " /// Id =" + ref + "\r"
}
}
alert (msg )
}
If it helps this is the code to draw the table (but this is called using js/ ajax after getting the information for the table )
<?php
$table = "" ;
include '../database_sql/dbconnect.php' ;
include '../functions/job_details.php';
include '../functions/check_date.php';
include '../functions/stock_list.php' ;
include '../functions/allocated_on_date.php' ;
$jobdate = $_GET['jobdate'] ;
$jobnumber = $_GET['jobnumber'] ;
$jobname = $_GET['jobname'] ;
$screens = screens_per_job($jobnumber,$size) ;
$table = "<h2 align= 'center' > $jobname (Job Number $jobnumber) : Screens required : $screens </h2>" ;
$table .= "<table id='visi' width='480px' align='center' cellspacing='1' cellpadding='1' border='1' ><tr>" ;
// get stock list from DB
stock_list() ;
$len = count( $stock);
$evresult = mysql_query("SELECT * FROM event WHERE jobnumber = '$jobnumber' ") ;
$event_row = mysql_fetch_array($evresult);
for ($counter = 0; $counter < $len; $counter++) {
$item = $stock[$counter] ;
$items = $item . "s" ;
$booked_for_job = $event_row[$items] ;
$result = mysql_query("SELECT * FROM $item ") ;
allocated_on_date($jobdate) ; // function
if ($booked_for_job) {
$count = 1 ;
$table .= "<td >$item<br> [$booked_for_job to Allocate] </td> " ;
WHILE ($row = mysql_fetch_array($result)) { ;
$booked_job = $screens[$item][$count]["job"] ; // from the allocated_on_date($jobdate) function
$description = $row['trailer_id'];
$class = $items ;
$id_items = $items . $count ;
$count ++ ;
if ($booked_job == $jobnumber) { // allocated to current job
$table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")' > " ;
$table .= "$num </div> </td>" ;
} ELSEIF ($booked_job === 0 ) { // available to allocated
$class .= "g" ;
$table .= "<td class='truckbox' > <div class='$class' id='$id_items' onClick='allocate(\"$booked_for_job\",\"$id_items\")' > " ;
$table .= "$num </div> </td>" ;
} ELSE { // allocated to ANOTHER job
$class .= "a" ;
$table .= "<td class='truckbox' > <div class='$class' id='$items' > " ;
$table .= "</td> " ;
}
} // while
$table .= "</tr>" ;
} ; // if
}; //for
$table .= "</table> " ;
$table .= "<table width='200px' align='center' cellspacing='12' cellpadding='1' ><tr>" ; // draw table buttons close and allocate
$table .= "</tr><tr>" ;
$table .= "<td class='truckbox' <div class='yesbutton' id='yes' onClick='confirm_allocate()' ; return false ; > ";
$table .= "<td class='truckbox' <div class='nobutton' id='no' onClick='hide()' > ";
$table .= "</tr></table> ";
echo $table ; // finally draw table
include '../database_sql/dbclose.php' ;
?>
I don't see any id attributes on the table cells (td elements) that are being generated. So ref is just going to be blank or undefined.
If that's not the problem then it could be the .rows.cells. Try .getElementsByTagName('td') instead. I think that line should be outside the loop, since it's not changing on each iteration.
Also, the latter part of your HTML is wrong - you don't close the td tag. Instead of <td class='truckbox' <div class... it should be <td class='truckbox'><div class...
You forgot to access the array elements:
...
for (i=0; i<r; i++) {
var row = tab.rows[i];
var cc = row.cells.length;
for (col=0; col<cc; col++){
var x = row.cells[col];
...

Categories

Resources