2016-03-08 14 views
5

Jestem bardzo nowy w JQuery i nie mogę przetworzyć, w jaki sposób mogę to zrobić. Mam tabelę w mojej bazie danych o nazwie user_thoughts. Próbuję zaimplementować funkcję przewijania w nieskończoność, co obecny, powinien alert("bottom") gdy thoughts dla użytkownika przewyższyć 10.Jak uzyskać liczbę wierszy jako zmienną JQuery

Każdy użytkownik może przesłać thought i na ich profile_page, wyświetlane są tylko ich myśli. Domyślnie potrzebuję 10 wpisów do wyświetlenia, a kiedy użytkownik przewinie się na dół strony, automatycznie załaduje 10 kolejnych postów, które napisał użytkownik.

Oto moja infinity_scroll scenariusz:

$(document).ready(function(){ 
    var load = 0; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      load++; 
      // start AJAX 
      $.post("inc/ajax.php", {load:load},function (data){ 
       $(".userposts_panel").append(data); // class 
       alert ("bottom"); 
      }); 
     } // if closed 
    }); 
}); 

muszę if otaczającą alert() który wygląda mniej więcej tak - if the user has over 10 posts and the user has scrolled to the bottom, then display more data - Znowu na razie jestem po prostu za pomocą alert() do testów. Jeśli użytkownik ma na przykład tylko 2 posty, a użytkownik przewija się do dołu, nie powinno się pojawić alert().

Moje myślenie jest to, że muszę var która pobiera liczbę stanowisk dla użytkownika, a następnie obsługi tak daleko, aby określić, czy warunki, takie jak

if (posts >=10){ 
     alert("bottom"); 
    } 

Jest to najlepszy sposób, aby przejść na ten temat? Jeśli nie, jakie podejście powinienem przyjąć?

Edit:

Jak wyświetlany jest każdy pojedynczy wiersz (jedno stanowisko):

<div class=userposts_panel> 
<?php 
// PHP query here, leading to this echo ... 
    echo "<div class='message_wrapper'> 
       <div class='where_msg_displayed'> 
        <div class='more_options' style='float: right;'> 
         <li class='dropdown'> 
          <a 'href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'> More <span 
                                   class='caret'></span></a> 
          <ul class='dropdown-menu'> 
           <li><a href>Flag Post 
           <span id='options' class='glyphicon glyphicon glyphicon-flag' aria-hidden='true'></span> </a></li>"; 
           if ($user == $username){ 
            echo "<li>"; ?> <a href="/inc/del_post.php?id=<?php echo $thought_id;?>">Delete <?php 
            echo "<span id='remove' class='glyphicon glyphicon-remove' aria-hidden='true'></span> </a></li>"; 
           } echo" 
          </ul> 
         </li> 
        </div>"; 
        if ($shared == "no"){ 
         echo "<img class='img-size' src='images/anomolous.jpg' />"; 
         } else { 
          echo "<img class='img-size' src='$profile_pic2'/>"; 
         } 
        echo "<span style='margin-left: 10px;'>$message_content </span> <br/> <br/>"; 
         if ($attachent !=""){ 
          echo "<img src='user_data/attached_images/$attachent' style='width: 230px; height=230px;'/>"; 
         } echo " 
       </div> 
      <div class='where_details_displayed'> 
       <a href='profile_page/$thoughts_by'> <b> $name_of_user </b> </a> - $date_of_msg 
       <div class='mini_nav' style='float: right;'> 
        <a href='/inc/favourite_post.php?id=";?><?php echo $thought_id;?><?php echo "'> 
         <span class='glyphicon glyphicon-heart-empty' aria-hidden='true' style='padding-right: 5px;' onclick='changeIcon()'></span> 
        </a> | 
        <a onclick='return toggle($thought_id);' style='padding-left: 5px;'> Comments ($num_of_comments) </a> 
       </div> 
       <div id='toggleComment$thought_id' class='new_comment' style='display:none;'> 
        <br/> $comment_posted_by said: $comment_body 
       </div> 
      </div> 
     </div>"; 
    ?> 
    </div> // userposts_panel closed. 
+2

Powinieneś przesłać kilka informacji o paginacji do front-endu, takich jak Total Records, Page & Limit, aby poprawnie obliczyć liczbę myśli już wyświetlonych i które należy pobrać podczas przewijania. – A1rPun

+0

Jak wspomniałem @ A1rPun, jest to właściwy sposób na uzyskanie paginacji! Ale czy w związku z tym konkretnym problemem, jaki jest, mógłbyś podać mały fragment HTML, w jaki sposób wyświetlasz każdy wiersz?Pomoże – Anubhab

+0

@Aububhab - Zmieniłem moje pytanie. :) – Freddy

Odpowiedz

1

Można dostać długość Twoich postach zliczając liczbę elementów do danej klasy pojawia się twoja strona, np Powiedzmy, że używasz klasy otoki „postRowWrap” do wyświetlania każdego posta, następnie

var postLen = $('.userposts_panel').find('.postRowWrap').length 

może dać długość obecnej liczby stanowisk w widoku.

Jeśli używasz <table>, następnie

var postLen = $(".userposts_panel").find('tr').length 

może dać długość stanowisk w widoku.

Teraz można zrobić:

if(postLen > 10){alert()} 

EDIT: Ach, trochę późno z mojego końca, ale zawrzeć to w Twoim przypadku -

postLen = $(".userposts_panel").find('.message_wrapper').length //which is, in the wrapper class find number of .message_wrapper which signifies number of messages you have as DOM in your HTML 

daje długość liczba wiadomości na twojej stronie. Mam nadzieję, że to pomoże. :)

+0

Witam, przepraszam za spóźnioną reakcję, zostałem przyłapany na innych problemach. Ale teraz zaimplementowałem Twoje rozwiązanie i działa idealnie! Dziękuję za pomoc. – Freddy

Powiązane problemy