Avoiding double render - Githubissues

I'm using jplist to add pagination and filtering to a hotel-listing page written in php. You can see an example here.

At the moment, I use a loop in php to create the list div, and the list-item divs within it.

It works OK, except that, initially, the php page loads and displays ALL the hotels (not just the first page) before jplist kicks in and replaces that with a paginated list of (in my case) 50 hotels.

I've looked at the various data-source options, but I'm not sure which, if any to choose and, if I do, if that will solve the problem.

What is the best way to avoid this double render?

Here's my code:

Javascript:

<script>
$('document').ready(function(){

   /**
   * user defined functions
   */
   jQuery.fn.jplist.settings = {

      /**
      * STARS: jquery ui range slider
      */
        starsSlider: function ($slider, $prev, $next){

            $slider.slider({
                min: 0
                , max: 5
                , range: true
                , values: [0, 5]
                , slide: function (event, ui) {
                    $prev.text('Stars: ' + ui.values[0]);
                    $next.text(ui.values[1]);
                }
            });
        }

        /**
        * STARS: jquery ui set values
        */
        ,starsValues: function ($slider, $prev, $next){
            $prev.text('Stars: ' + $slider.slider('values', 0));
            $next.text($slider.slider('values', 1));
        }

      /**
      * RATING: jquery ui range slider
      */
        ,ratingSlider: function ($slider, $prev, $next){

            $slider.slider({
                min: 0
                , max: 10
                , range: true
                , values: [0, 10]
                , slide: function (event, ui) {
                    $prev.text('Rating: ' + ui.values[0]);
                    $next.text(ui.values[1]);
                }
            });
        }

        /**
        * RATING: jquery ui set values
        */
        ,ratingValues: function ($slider, $prev, $next){
            $prev.text('Rating: ' + $slider.slider('values', 0));
            $next.text($slider.slider('values', 1));
        }

   };

   //check all jPList javascript options
   $('#demo').jplist({              
      itemsBox: '.list' 
      ,itemPath: '.list-item' 
      ,panelPath: '.jplist-panel'   
   });

});
</script>

HTML/PHP:

<!-- demo -->
<div id="demo">

    <!-- panel -->
    <div class="jplist-panel" style="display:inline-block;width:100%;">

        <!-- ios button: show/hide panel -->
        <div class="jplist-ios-button">
             <i class="fa fa-sort"></i>
             jPList Actions
        </div>

        <!-- reset button -->
        <button 
             type="button" 
             class="jplist-reset-btn"
             data-control-type="reset" 
             data-control-name="reset" 
             data-control-action="reset">
             Reset <i class="fa fa-share"></i>
        </button>

        <!-- stars range slider -->
        <div
            class="jplist-range-slider"
            data-control-type="range-slider" 
            data-control-name="range-slider-stars" 
            data-control-action="filter"
            data-path=".data_stars"
            data-slider-func="starsSlider" 
            data-setvalues-func="starsValues">

            <div class="value" data-type="prev-value"></div>
            <div class="ui-slider" data-type="ui-slider"></div>
            <div class="value" data-type="next-value"></div>
        </div>       

        <!-- rating range slider -->
        <div
            class="jplist-range-slider"
            data-control-type="range-slider" 
            data-control-name="range-slider-rating" 
            data-control-action="filter"
            data-path=".data_rating"
            data-slider-func="ratingSlider" 
            data-setvalues-func="ratingValues">

            <div class="value" data-type="prev-value"></div>
            <div class="ui-slider" data-type="ui-slider"></div>
            <div class="value" data-type="next-value"></div>
        </div>       

        <!-- Neighbourhood Filter DropDown Control -->
        <div
         class="jplist-drop-down" 
         data-control-type="filter-drop-down" 
         data-control-name="area-filter" 
         data-control-action="filter">
         <ul style="width:20rem;list-style:none;">
           <li><span data-path="default">Neighbourhood</span></li>
            <?php
             // get list of neighbourhoods (for filter)
             while($row_neighbourhoods = $stmt_neighbourhoods->fetch()) {
                 $area_id = $row_neighbourhoods['area'];
                 if (! $area_id==0){
                     $area_name = $row_neighbourhoods['area_name'];
                     echo '<li><span data-path=".data-area_'.$area_id.'">'.$area_name.'</span></li>';
                 }
             }
            ?>
         </ul>
        </div>

        <!-- Chain Filter DropDown Control -->
        <div
            class="jplist-drop-down" 
            data-control-type="filter-drop-down" 
            data-control-name="chain-filter" 
            data-control-action="filter">
            <ul style="width:20rem;list-style:none;">
                <li><span data-path="default">Chain</span></li>
                <?php
                 // get list of chains (for filter)
                 while($row_chains = $stmt_chains->fetch()) {
                     $chain_id = $row_chains['chain'];
                     $chain_name = $row_chains['chain_name'];
                     echo '<li><span data-path=".data-chain_'.$chain_id.'">'.$chain_name.'</span></li>';
                 }
                ?>
            </ul>
        </div>

        <!-- sort select control -->
        <select 
        class="jplist-select" 
        data-control-type="sort-select" 
        data-control-name="sort" 
        data-control-action="sort">

        <option data-path="default">Sort by</option>
        <option data-path=".price" data-order="asc" data-type="number">Price asc</option>
        <option data-path=".price" data-order="desc" data-type="number">Price desc</option>
        </select>       

        <br /><br />
        <!-- items per page dropdown -->
        <div 
            class="jplist-drop-down" 
            data-control-type="items-per-page-drop-down" 
            data-control-name="paging" 
            data-control-action="paging">
            <ul style="list-style:none;">
                <li><span data-number="10"> 10 per page </span></li>
                <li><span data-number="20"> 20 per page </span></li>
                <li><span data-number="50" data-default="true"> 50 per page </span></li>
                <li><span data-number="100"> 100 per page </span></li>
                <li><span data-number="200"> 200 per page </span></li>
                <li><span data-number="500"> 500 per page </span></li>
                <li><span data-number="all"> view all </span></li>
            </ul>
        </div>  

        <!-- pagination results control -->
        <div 
            class="jplist-label" 
            data-type="Page {current} of {pages}" 
            data-control-type="pagination-info" 
            data-control-name="paging" 
            data-control-action="paging">
        </div>  

        <!-- pagination control -->
        <div 
            class="jplist-pagination" 
            data-control-type="pagination" 
            data-control-name="paging" 
            data-control-action="paging">
        </div>  

    </div><!-- panel -->
    <br /><br />
    <div class="list">
    <?php
    // retrieve geo_area from session
    $geo_area=$_SESSION['geo_area'];
    while($row = $stmt->fetch()) {

        // look up hotel's Area, if specified
        if (! is_null($row['area'])){
            $area_name = ' : <strong>'.utf8_encode($row['area_name']).'</strong>';
        }

        // include Chain, when applicable
        if (! is_null($row['chain_name'])){
            $chain_name = ' ('.utf8_encode($row['chain_name']).')';
        }

        $name = utf8_encode($row['name']);
        // display list item with various data-* attributes for filtering
        echo '<div class="list-item" style="display:block;overflow:auto;margin-bottom:10px;background:#F7F7F7;padding:10px;border:1px solid #E2E2E2;" >';

            // metadata for filtering
            echo '<span class="data-area_'.$row['area'].'"></span>';
            echo '<span class="data-chain_'.$row['chain'].'"></span>';
            if ($row['low_rate']>0){
                echo '<span style="display:none;" class="price">'.$row['low_rate'].'</span>';
            }
            echo '<span style="display:none;" class="data_stars">'.$row['star_rating'].'</span>';
            echo '<span style="display:none;" class="data_rating">'.$row['review_rating'].'</span>';
            echo "<div class='flex-item'><a href='http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=" . $row['id']." 'title='Check availability of ".utf8_encode($row['name'])."'><img style='margin-right: 10px;' width='90px' height='90px' align='left' src='" . $row['thumbnail'] . "'></a></div><!--flex-item-->";
            echo "<div class='flex-item'>" . utf8_encode($row['name']).$chain_name.$area_name."</div><!--flex-item-->";
            echo "<div class='flex-item'>" . ltrim((utf8_encode($row['address']) . ", "),", ") . $geo_area."</div><!--flex-item-->";
            $stats = "<div class='flex-item'>";
            // stars
            if($row['star_rating']>0) {
                if($row['star_rating']>1) {
                    $stats.= rtrim($row['star_rating'],".0") . " Stars | ";
                }
                else {
                    $stats.= rtrim($row['star_rating'],".0") . " Star | ";
                }
            }
            // rooms
            if($row['rooms']>0) {
                if($row['rooms']>1) {
                    $stats.= $row['rooms'] . " Rooms | ";
                }
                else {
                    $stats.= $row['rooms'] . " Room | ";
                }
            }
            // rating
            if($row['review_rating']>0) {
                if($row['review_count']>1) {
                    $stats.= "Review Rating: " . $row['review_rating'] . " (" . $row['review_count'] . " Reviews) | ";
                }
                else {
                    $stats.= "Review Rating: " . $row['review_rating'] . " (" . $row['review_count'] . " Review) | ";
                }
            }
            // rate
            if($row['low_rate']>0) {
                // currency symbol
                if($row['currency_symbol']==''){
                    $curr=$row['currency_code'];
                }
                else {
                    $curr=$row['currency_symbol'];
                }
                $stats.= "From ".$curr.$row['low_rate'];
            }
            $stats = rtrim($stats," | ")."</div><!--flex-item-->";
            echo $stats;
            // if available, use /country/state/city link format
            if(isset($_SESSION['href'])){
                $href = $_SESSION['href'];
                echo '<div class="flex-item">' .$href . '/' .$city_url. '/' .$row['url']. '" title="View details of ' .utf8_encode($row['name']). '">View Details</a> | <a href="http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=' .$row['id']. ' "title="Check availability of ' .utf8_encode($row['name']). '"> Check Availability</a></div><!--flex-item-->';
            }
            // otherwise use /in/city link format
            else {
                echo "<div class='flex-item'><a href='/in/$city_url/" . $row['url'] ."' title='View details of ".utf8_encode($row['name'])."'>View Details</a> | <a href='http://secure.every-hotel.com/hotels/hotel/?refid=6446&refclickid=ehlist&hotel_id=" . $row['id']." 'title='Check availability of ".utf8_encode($row['name'])."'> Check Availability</a></div><!--flex-item-->";
            }

        echo "</div><!--list-item-->";
    }  // end while
    ?>
    </div><!--list-->
    <!-- no results found -->
    <div class="jplist-no-results">
      <p>No results found</p>
    </div>
</div><!--demo-->

1rosehip / jplist

Avoiding double render #174