So laden Sie aus der Datenbank auf der Seite scrollen in PHP und Jquery mit Ajax auf der gleichen Seite

Question

Ich brauche etwas Hilfe in Bezug auf meine eCommerce-Site zu entwickeln, möchte ich Wagen aus der Datenbank auf der Seite scroll das Problem zu haben ist, dass ich will meine „Filter Kategorien ersten“ herausziehen, bevor Karre Elemente in der Datenbank unten ist mein Skript

<span class="applied-amount">Applied Filters</span> 
<button type="button" class="btn btn-default btn-sm clear-all pull-right" id="clear-all">CLEAR ALL</button> 
</div> 
<div class="column-filters panel-group" id="accordion"> 
<div class="panel-title-bcrums"> </div> 
<!--Category Panel--> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <div class="panel-title"> CATEGORY </div> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <label name="filter-category" data-category-url="computer-software" data-category-id=""> <span class="filter-key">Computer Software</span> <span class="filter-count">(724)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="computer-software"></i> </label> 
     <label name="filter-category" data-category-url="accessories-computing" data-category-id=""> <span class="filter-key">Computing Accessories</span> <span class="filter-count">(8764)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="accessories-computing"></i> </label> 
     <label name="filter-category" data-category-url="computing-bundles" data-category-id=""> <span class="filter-key">Computing Bundles</span> <span class="filter-count">(3)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="computing-bundles"></i> </label> 
     <label name="filter-category" data-category-url="desktop-monitors" data-category-id=""> <span class="filter-key">Desktop and Monitors</span> <span class="filter-count">(493)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="desktop-monitors"></i> </label> 
     <label name="filter-category" data-category-url="laptops" data-category-id=""> <span class="filter-key">Laptops</span> <span class="filter-count">(2309)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="laptops"></i> </label> 
     <label name="filter-category" data-category-url="networking" data-category-id=""> <span class="filter-key">Networking</span> <span class="filter-count">(1628)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="networking"></i> </label> 
     <label name="filter-category" data-category-url="printers-scanners-5232" data-category-id=""> <span class="filter-key">Printers, Scanners and Accessories</span> <span class="filter-count">(3550)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="printers-scanners-5232"></i> </label> 
     <label name="filter-category" data-category-url="projectors-5233" data-category-id=""> <span class="filter-key">Projectors &amp; Accessories</span> <span class="filter-count">(582)</span> <i class="fa fa-angle-right pull-right caret-icon" name="filter-category" data-category-url="projectors-5233"></i> </label> 
    </div> 
    <div class="clearfix"></div> 
</div> 
Brand Panel 
<div class="panel panel-default "> 
<div class="for-brand"></div> 
<div class="panel-heading"> 
    <div class="panel-title" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"> BRAND <span class="panel-selected-size -brand">(0)</span> <i class="fa fa-angle-down pull-right caret-icon"></i> <i class="fa fa-angle-up pull-right caret-icon"></i> </div> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse in"> 
<input type="text" class="search-brand" id="search-brand-input" placeholder="Search brands.."> 
<div class="brand-list-remote"></div> 
<div id="aggregated_brand" class="brand-list" filter-attr-val="aggregated_brand"> 
<label data-name="Acer" class="aggregated_brand filter-40660"> 
    <input class="filter-box" type="checkbox" name="filter-brand" 
                   data-brand="Acer" data-count="121"/> 
    <span class="filter-key">Acer</span> <span class="filter-count">(121)</span> </label> 
<label data-name="Apple" class="aggregated_brand filter-39454"> 
    <input class="filter-box" type="checkbox" name="filter-brand" 
                   data-brand="Apple" data-count="332"/> 
    <span class="filter-key">Apple</span> <span class="filter-count">(332)</span> </label> 
<label data-name="Asus" class="aggregated_brand filter-150136"> 
    <input class="filter-box" type="checkbox" name="filter-brand" 
                   data-brand="Asus" data-count="104"/> 
    <span class="filter-key">Asus</span> <span class="filter-count">(104)</span> </label> 
Displaying of carts here from tables 
<div class="catalog-box"> 
    <ul id="myList" class="catalog"> 
     <?php include('getresult.php'); ?> 
    </ul> 
</div> 

Answer 1

Anzeigen können Sie $(window).scroll() verwenden, um die Aufgabe zu erreichen ...

$(window).scroll(function (event) { 
    yourFunction(); 
}); 
function yourFunction(){ 
    //call your ajax here 
} 

in Ihrem ajax einen Code schreiben Um die Daten aus der Datenbank zu bekommen und auf den Erfolg, laden Sie Ihr nächstes pa rt von html.