Question

I am having trouble thinking of the right logic and approach to separating my data and dynamically creating a table with pagination. I have a function that reads the file server, compiles a list of images and sorts them into an array like this:

imagenames ( [0] => apple.png [1] => banana.png [2] => carrot.png [3] => dill.png ) 

I use this array to dynamically create a table with a code like this :

echo '<table>';
for ($r=0; $r<$rows; $r++){
    echo '<tr>';
    for ($c=0; $c<$cols; $c++){
        if($index<$imagecount){
            echo '<td><img src="images/'.$imagenames[$index].'" ></td>';
            $index++;
        }
    }
    echo '</tr>';
}   
echo '</table>';

If I set $rows=3; and $cols=3;, my table will have room for 9 images. If my array had lets say 50 images, how would I go about paginating the the table so I have a next, previous and a numbered menu so that the whole table does not have to load all at once or ignore all the files outside of the scope defined by $rows*$cols?

*EDIT** ------->>>

So if I go with something that Steven Liao suggests and have this:

$size = $rows*$cols; // number of elements on page
$min = $_GET['p']*$size; // start index in array
$total_pages = ceil(count($imagenames)/$size); 

echo '<table class="photobox">';
   for ($r=0; $r<$rows; $r++){
      echo '<tr>';
      for ($c=0; $c<$cols; $c++){
    if($index<$imagecount){
       echo '<td><img src="images/'.$imagenames[$index].'" /></td>';
       $index++;
    }
      }
      echo '</tr>';
   }    
echo '</table><br/><br/>';

// Previous
$prev_page = max($_GET['p']-1, 0);
echo '<a href="photobox.php?p='.$prev_page.'">Previous</a>';
// Each individual page number (no separators yet)
for($i = 0; $i < $total_pages; $i++){
    echo '<a href="photobox.php?p='.$i.'">'.($i+1).'</a>';
}
// Next
$next_page = min($_GET['p']+1,$total_pages-1);
echo '<a href="photobox.php?p='.$next_page.'">Next</a>';

This Displays the table and creates the navigation links. How would i go about making the table content change with each page. The navigation is there and the URL changes with the pages but the table does not change and i don't really know this paging code well as it is based off Steven Liao's Answer.

Was it helpful?

Solution

You'll have $rows×$cols number of images on each page. So on your first page $index would start on 0, on next page start from 1+$page×$rows×$cols and so on, where $page is page nnumber. I hope you get the idea.

OTHER TIPS

$size = $row*$col; // number of elements on page
$min = $_GET['p']*$size; // start index in array
$total_pages = ceil(count($imagenames)/$size); // round up number of pages (stragglers get their own page)

// Display logic here
for($i = 0; $i < $rows; $i++){
    for($j = 0; $j < $cols; $j++){
        echo '<span>Display Logic for '.$imagenames[$min+$i*rows+$j].'</span>';
    }
}

// Previous
$prev_page = max($_GET['p']-1, 0);
echo '<a href="this.php?p='.$prev_page.'">Previous</a>';

// Each individual page number (no separators yet)
for($i = 0; $i < $total_pages; $i++){
    echo '<a href="this.php?p='.$i.'">'.($i+1).'</a>';
}

// Next
$next_page = min($_GET['p']+1,$total_pages-1);
echo '<a href="this.php?p='.$next_page.'">Next</a>';

jQuery DataTables: jQuery plugin with very simple basic usage:

$(document).ready(function(){
    $('#your_table_id').dataTable();
});

In addition to navigation and pagination you also get multi-column sorting with data detection, and a searchbox. Support for jQuery UI styles. (Features can be enabled/disabled as required).

NB: Your table must use thead an tbody elements for this plugin to work properly.

There are multiple other plugins available too.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top