问题
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.
回答1:
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>' ;
来源:https://stackoverflow.com/questions/45212066/toggle-onclick-between-ascending-en-descending-date-using-php