【问题标题】:Toggle onclick between ascending en descending date using PHP使用 PHP 在升序和降序日期之间切换 onclick
【发布时间】:2017-07-20 10:24:31
【问题描述】:

我遇到了这个问题。我正在尝试创建一个函数,可以在表格中按日期对结果进行排序。到目前为止,我得到了这个:

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



}

在我的 php 页面中

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

在我的页脚中

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

我称之为匹配列表。它下降和上升......但我希望它出现在点击事件中......我将如何做到这一点?我还在学习……如果这是一个愚蠢的问题,我很抱歉。

【问题讨论】:

  • 如果您想在点击时进行操作,您需要在 javascript 中进行。例如,您可以显示 2 个结果和 2 个不同的 div:&lt;div class="asc" style="display:none;"&gt;&lt;?php echo $asc_results; ?&gt;&lt;/div&gt;&lt;div class="desc" style="display:none;"&gt;&lt;?php echo $desc_results; ?&gt;&lt;/div&gt;,然后有 2 个按钮 &lt;a class="asc"&gt;Sort ASC&lt;/a&gt; &lt;a class="desc"&gt;&lt;/a&gt;,并添加 JS:&lt;script&gt;jQuery(document).on('click','a.asc',function(){ jQuery('div.asc').show() ; }) ;
  • 感谢皮埃尔的回应!我会试试的
  • 但如果两者都是 display:none ...它在开始时什么也不显示,只是按钮...我应该如何默认显示一个
  • 很久没见过这么乱的了……虽然按键对数组进行排序可能会有无数重复的问题……这两个数组? $asc & $desc 是其中最糟糕的部分;只需使用一个结果数组(占用一半 RAM)。此外,生成 HTML 表格不再常见……虽然已经在使用 jQuery,但发送 JSON 可能是当前的做法;例如die(json_encode($results));.

标签: javascript php jquery css-tables usort


【解决方案1】:

我认为你需要的 JS 部分非常简单:

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>

请注意你的 php 部分:当你使用 usort 函数时,$laMatches 的值会改变,所以调用 2 次 usort 只会显示最后的结果。

您需要复制您的 $laMatches 并对副本进行排序:

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

【讨论】:

  • 感谢皮埃尔的回答!我编辑了我的帖子......但它什么也没显示......我错过了什么吗?
  • 如果你的函数中有 print_r($laMatches) 你确定里面有东西吗?您还可以检查源页面以查看它在 html 中真正显示的内容吗?
  • 还要小心你的页脚,不要混用 CSS 和 JS:&lt;script&gt; jQuery(document).on('click','a.asc, a.desc',function(e){ e.preventDefault() ; jQuery('div.block').hide() ; jQuery('div.'+jQuery(this).attr('class')).show() ; }) ;&lt;/script&gt; &lt;style&gt; div.asc, { display:block ; } div.desc { display:none ; } &lt;/style&gt;
  • 它仍然没有显示任何内容....当我执行 print_r($laMatches) 时,它会向我显示数据,因此它不是空的。我编辑了我将 部分放在主 php 中的 div 上方的帖子。
  • 我认为这部分有问题 echo '
    '.implode('
    ',$asc).'
    ' ; echo '
    '.implode('
    ',$desc).'
    ' ; ?
猜你喜欢
  • 2021-09-28
  • 2015-08-27
  • 2015-11-12
  • 2012-10-14
  • 2021-09-23
  • 1970-01-01
  • 2015-09-19
  • 1970-01-01
  • 2020-02-08
相关资源
最近更新 更多