2010-09-29 4 views
-1

Est-ce que quelqu'un sait comment amener tous les résultats d'une table mysql, afficher seulement le premier X, (disons 10), puis cacher le reste en utilisant jquery? Fondamentalement, comme j'ai déjà la jquery, j'ai juste besoin de savoir comment montrer uniquement les premiers résultats de X dans un div, puis le reste dans un div séparé.PHP/MySQL Afficher les 1 premiers résultats, masquer le reste

Mon but est de montrer seulement les 10 premiers résultats, mais fournir un lien au bas de la page permettant à l'utilisateur d'afficher tous les résultats. Pensait que le lien hypertexte pourrait simplement ré-exécuter la requête, mais a pensé qu'il serait plus facile de montrer/cacher en utilisant jquery.

Merci beaucoup à l'avance. S

Je pensais que je voudrais ajouter le code ci-dessous j'utilise

$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'; 
         } 
+2

fournissent une partie de votre code html! – Thariama

+0

Yuck! Veuillez fournir le code html et non le code du modèle de bol de spag. Voir la page dans un navigateur, afficher la source, copier, coller. – Keyo

+2

J'espère que vous avez seulement une poignée d'entrées dans votre table, parce que si vous utilisez javascript pour la pagination de quelques milliers d'enregistrements, votre code finira probablement sur TheDailyWTF –

Répondre

2

Cela permet de masquer les 10 premiers enfants. Comment envisagez-vous de montrer les autres résultats? Boutons, champs, widgets jqueryui? Vous aurez juste besoin d'ajouter un événement de clic qui appelle cette fonction.

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

dans votre requête limite pour le 0,10 reste limite de 11, xxx

+0

Les tags ne le montraient pas, mais c'est un jquery question - il souhaite cacher une partie des résultats avec jQuery. – Extrakun

+0

haha, lire et lire, désolé – Grumpy

0

Lorsque vous imprimez les données de chaque ligne comptent chaque itération en incrémentant un compteur. Lorsque vous arrivez à 11 commencer une nouvelle div qui a un ID différent de celui de votre 1ère div que vous avez déjà défini un ID pour. Maintenant, en utilisant jQuery, vous pouvez cacher et montrer la 2e div avec les résultats restants que vous s'il vous plaît.

2

Si vous avez déjà vos éléments dans un objet jQuery (par exemple, $ ('# sql-results') contient tous vos résultats), vous pouvez toujours le faire: $ ('# sql-results: lt (10) ') pour travailler avec les dix premiers éléments, et $ (' # sql-results: gt (9) ') pour travailler avec le reste des éléments.

Vous devez décider vous-même de l'efficacité de votre approche pour cette quantité de données que vous traitez.

droit, donc pour votre structure de balisage spécifique, vous pouvez ajouter à votre 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); 
1

Cela implique beaucoup de réécriture, mais jquery a une datatables plugin qui affichera les données. Pour l'utiliser, vous devez faire quelque chose comme

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

Le jquery est alors

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

Je ne sais pas comment il ne mesure aucun message de données et je sais que, avec le code que vous avez écrit Ce n'est peut-être pas bon pour vous maintenant, mais je le poste parce qu'il pourrait être utile pour quelqu'un qui cherche des informations de pagination ou pour vous si vous voulez faire quelque chose de similaire à nouveau. Les données sont également utiles car l'utilisateur peut choisir le nombre de résultats qu'il souhaite afficher, la colonne à trier et la direction à trier.

0

Diviser les valeurs de retour dans votre fichier php avec un caractère ex:

echo "this is first value +"; 

echo "this is second value +"; 

echo "this is third value +"; 



utiliser javascript pour séparer le retour des valeurs ex:

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



maintenant tous trois valeurs sont placées dans ajaxArray et vous pouvez utiliser quelqu'un que vous voulez ex:

ajaxArray[0] = this is first value 
Questions connexes