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.
How do I paginate an html table created from an array?
-
30-07-2021 - |
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.
Solution
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.