簡體   English   中英

PHP / MySQL顯示前X個結果,隱藏其余結果

[英]PHP/MySQL Show first X results, hide the rest

有誰知道如何引入所有mysql表的結果,只顯示第一個X(例如10),然后使用jquery隱藏其余的? 基本上,因為我已經有了jquery,所以我只需要知道如何在一個div中僅顯示第一個X結果,然后在單獨的div中顯示其余的結果。

我的目標是僅顯示前10個結果,但在頁面底部提供一個鏈接,允許用戶顯示所有結果。 本以為超鏈接可以重新執行查詢,但認為使用jquery顯示/隱藏起來會更容易。

提前謝謝了。 小號

以為我會在下面添加我正在使用的代碼

$query = "SELECT * FROM ispress WHERE active = '1' ORDER BY YEAR(date) DESC, MONTH(date) DESC LIMIT 0, 7";
                        $resultSet = mysql_query($query);

                        if (mysql_num_rows($resultSet))
                        {
                          $newsArray = array();
                          while ($newsResult = mysql_fetch_array($resultSet))
                          {                                   
                        $newDate =  $newsResult['date'] ;    
                        $timePeriod = date('F  Y ',strtotime($newDate));    
                        $bFirstTime = true;

                        if (!isset($newsArray[$timePeriod]))
                        {
                          $newsArray[$timePeriod] = array();
                        }
                        $newsArray[$timePeriod][] = $newsResult;                            
                          }
                          foreach ($newsArray as $timePeriod => $newsItems)
                          {                                                                                    
                        echo '<div class="date">' . $timePeriod . '</div>' . PHP_EOL;          
                           echo '<ul class="press">' . PHP_EOL;
                        foreach ($newsItems as $item)
                        {                    
                        if ($bFirstTime) {
                        echo '<li>';
                         echo '<img src="'.$wwwUrl.'images/news/'.$item['image'].'" width="'.$item['imgWidth'].'" height="'.$item['imgHeight'].'" title="'.$item['title'].'" alt="'.$item['title'].'" />
                                <h3><a href="'.$wwwUrl.'press-releases/'.$item["id"].'/'.$item["title"].'.php">'.$item["title"].'</a></h3>                                    
                                <p>'.substr($item['descrip'],0,244).'...</p>
                                <p><a href="'.$wwwUrl.'press-releases/'.$item["id"].'/'.$item["title"].'.php">Read more</a></p>    
                                ';
                         echo '</li>' . PHP_EOL;    
                        $bFirstTime = false;
                        } else {
                           echo '<li>';
                         echo '<a href="'.$wwwUrl.'press-releases/'.$item["id"].'/'.$item["title"].'.php"><img src="'.$wwwUrl.'images/news/'.$item['image'].'" width="'.$item['tnWidth'].'" height="'.$item['tnHeight'].'" title="'.$item['title'].'" alt="'.$item['title'].'" /></a>
                                <h3><a href="'.$wwwUrl.'press-releases/'.$item["id"].'/'.$item["title"].'.php">'.$item["title"].'</a></h3>                                    
                                <p>'.substr($item['descrip'],0,100).'...</p>
                                <p><a href="'.$wwwUrl.'press-releases/'.$item["id"].'/'.$item["title"].'.php">Read more</a></p>    
                                ';
                        echo '<div class="clear"></div>' . PHP_EOL;
                         echo '</li>' . PHP_EOL;                            
                            }                                                        
                           }
                        echo '</ul>' . PHP_EOL;                            
                              }
                            echo '<p><a href="#" id="slick-toggle">Older posts...</a></p>'. PHP_EOL;
                            echo '<div id="slickbox">This is the box that will be shown and display the rest of the news results. :)</div>'. PHP_EOL;
                        }                                                
                        else
                            {
                          echo 'We currently have no press releases available';
                        }

如果您已經將元素包含在jQuery對象中(例如,$('#sql-results')保存了所有結果),則始終可以這樣做:$('#sql-results:lt(10)')可以使用前十個元素,使用$('#sql-results:gt(9)')處理其余元素。

您必須決定自己的方法對於這種數量的數據的處理效率。

對,因此對於您特定的標記結構,可以將其添加到JS中:

// Obviously this is untested and probably not bug-/typo-free

(
  function($) {
    var $slickbox = $('#slickbox').hide();

    $('<ul></ul>')
      .appendTo($slickbox)
      .append('ul.press li:gt(9)');

    $('#slick-toggle')
      .bind(
        'click',
        function(){
          $slickbox.toggle();
        }
      );
  }
)(jQuery);

這將隱藏前10個孩子。 您打算如何顯示其他結果? 按鈕,字段,jqueryui小部件? 您只需要添加一個點擊事件即可調用此函數。

function limit_results(start, end) {
    $('#things > .thing').each(index) {
        if(index < end && index >= start) {
            $(this).hide();
        }  
    }
}
limit_results(1,10);

這將涉及大量重寫,但是jquery有一個datatables插件來顯示數據。 要使用它,您需要做類似的事情

echo '<table id="news-table">'
echo '<thead>';//Datatables needs a thead with the correct number of columns. However you don't need to fill them in.
echo '<th>Date</th>';
echo '<th>Time Period</th>'
echo '</thead><tbody>';
while ($data = my_sql_fetch_array($result)) {
    echo '<td>Whatever</td>';
    echo '<td>Another Field</td>';
}
echo '</tbody></table>';

然后,jQuery

$('#news-table').dataTable();

我不確定它將如何自定義無數據消息,並且我知道使用您編寫的代碼現在可能對您沒有任何好處,但是我正在發布它,因為它可能對尋找分頁信息的人有用或者如果您想再次執行類似操作。 數據表也很有用,因為用戶可以選擇他們要顯示的結果數,他們要根據什么列進行排序以及要按照什么方向進行排序。

在您的查詢限制0,10中為其余限制11,xxx

當您打印出每一行的數據時,通過增加一個計數器來計數每次迭代。 當您達到11時,啟動一個新的div,該div的ID與您已為其定義ID的第一個div的ID不同。 現在,使用jQuery,您可以根據需要隱藏和顯示第二個div以及其余結果。

用字符ex分隔php文件中的返回值:

echo "this is first value +";

echo "this is second value +";

echo "this is third value +";



使用javascript分隔返回值,例如:

var ajaxArray = ajaxValues.split("+");  



現在,所有三個值都放在ajaxArray ,您可以使用任何想要的人,例如:

ajaxArray[0] = this is first value

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM