Last mehr Daten aus der Tabelle mit AJAX und PHP

Question

Ich habe 7-Daten in meiner Datenbank

Ich versuche, meine Daten aus der Tabelle zu laden ajax und php verwenden.

aber nachdem ich auf den Knopf mehr laden klicken, zeigen die Daten, aber load more Knopf ist weg.

hier mein index.php Code https://github.com/jazuly1/piratefiles/blob/master/index.php

hier mein Ajax-Code

<script> 
$(document).ready(function(){ 
    $(document).on('click','.show_more',function(){ 
     var ID = $(this).attr('id'); 
     $('.show_more').hide(); 
     $('.loding').show(); 
     $.ajax({ 
      type:'POST', 
      url:'getData.php', 
      data:'idpost='+ID, 
      success:function(html){ 
       $('#show_more_main'+ID).remove(); 
       $('.tutorial_list').append(html); 
      } 
     }); 
    }); 
}); 
</script> 

und meine getdata.php Code https://github.com/jazuly1/piratefiles/blob/master/getdata.php

bevor ich auf Last mehr Taste

nachdem ich auf "Mehr laden" geklickt habe. Der Knopf ist weg.

Answer 1

Wenn "mehr" geklickt wird, Sie $('.show_more').hide(), die Sinn macht. Aber du zeigst es nie wieder? Sie entfernen auch eine ähnliche Auswahl komplett ($('#show_more_main'+ID).remove()), aber soweit ich das beurteilen kann, hat das keine Auswirkung.

Ändern Sie den remove() zu so etwas wie:

$('.show_more').show(); 
$('.loding').hide(); 

Answer 2

Das Problem ist haben Sie den Load more Abschnitt mit jQuery entfernt und aus dem getData API-Aufruf zu erwarten. Aber die getData API-Aufruf gibt HTML mit <tr>...</tr> Inhalt und zusätzlich Show more Abschnitt, falls erforderlich. Es ist besser, entweder JSON Antwort zu verwenden und diese <tr>...</tr> ‚s manuell in Java Script oder eine JSON Reaktion mit zwei Abschnitten, können in folgendem Format erzeugen:

{ 
    'content': '<tr><td>...</td></tr>....<tr><td>...</td></tr>', 
    'showMore': '<div class="show_more_main" ...</div>' 
} 

als aus der Antwort (vergessen Sie nicht zu verwenden, response = $.parseJSON(response)) lesen Sie die content und fügen Sie als $('.tutorial_list').append(response.content) für Daten Abschnitt und in ähnlicher Weise $("table.table").append(response.showMore) für mehr Abschnitt anzeigen.

Ich glaube, Sie haben die Idee, wo Sie falsch machen.

Aber wenn Sie immer noch Ihren eigenen Code anstelle von JSON verwenden möchten, verwenden Sie einfach den folgenden Trick.

Schritt 1: In getdata.php Update mehr anzeigen unten im Abschnitt Code mit (Keeping the Show more Abschnitt unsichtbar):

<?php endforeach; 
    if($data > $showLimit){ ?> 
     <div class="show_more_main" style="visibility:hidden" id="show_more_main<?php echo $tutorial_id; ?>"> 
      <span id="<?php echo $tutorial_id; ?>" class="show_more" title="Load more posts" href="#" style="text-decoration: none;">Show more</span> 
      <span class="loding" style="display: none;"><span class="loding_txt"><i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:12px;"></i>Loading....</span></span> 
     </div> 
    <?php } 
    } 
}?> 

Schritt 2: Bewegen Sie den verborgenen Abschnitt Show more an der richtigen Adresse Java Script in index.php

mit

<script> 
$(document).ready(function(){ 
    $(document).on('click','.show_more',function(){ 
     var ID = $(this).attr('id'); 
     $('.show_more').hide(); 
     $('.loding').show(); 
     $.ajax({ 
      type:'POST', 
      url:'getData.php', 
      data:'idpost='+ID, 
      success:function(html){ 
       $('#show_more_main'+ID).remove(); 
       $('.tutorial_list').append(html); 
       //Move to new right place if show more section exists. You may give data table an id if you want 
       $(".show_more_main").appendTo("table.table"); 
       $(".show_more_main").show(); 
      } 
     }); 
    }); 
}); 
</script> 

Ich hoffe, das hilft Ihnen. Fühlen Sie sich frei, Kommentar zu schreiben, wenn ein Teil für Sie nicht klar ist.