Avoiding double render

_From @Android63 on March 5, 2016 8:31_

I'm using jplist to add pagination and filtering to a hotel-listing page written in php. You can see an example [here](http://www.every-hotel.com/in/colchester).

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:

```

$('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'
});

});

```

HTML/PHP:

```

jPList Actions

Reset

• Neighbourhood

fetch()) {
$area_id = $row_neighbourhoods['area'];
if (! $area_id==0){
$area_name = $row_neighbourhoods['area_name'];
echo '
• '.$area_name.'
';
}
}
?>

• Chain

fetch()) {
$chain_id = $row_chains['chain'];
$chain_name = $row_chains['chain_name'];
echo '
• '.$chain_name.'
';
}
?>

Sort by
Price asc
Price desc

• 10 per page


• 20 per page


• 50 per page


• 100 per page


• 200 per page


• 500 per page


• view all

fetch()) {

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

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

';

// metadata for filtering
echo '';
echo '';
if ($row['low_rate']>0){
echo ''.$row['low_rate'].'';
}
echo ''.$row['star_rating'].'';
echo ''.$row['review_rating'].'';
echo "

";
echo "

" . utf8_encode($row['name']).$chain_name.$area_name."

";
echo "

" . ltrim((utf8_encode($row['address']) . ", "),", ") . $geo_area."

";
$stats = "

";
// 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," | ")."

";
echo $stats;
// if available, use /country/state/city link format
if(isset($_SESSION['href'])){
$href = $_SESSION['href'];
echo '

' .$href . '/' .$city_url. '/' .$row['url']. '" title="View details of ' .utf8_encode($row['name']). '">View Details | Check Availability

';
}
// otherwise use /in/city link format
else {
echo "

View Details | Check Availability

";
}

echo "

";
} // end while
?>

No results found

_Copied from original issue: no81no/jplist#174_