[GH-ISSUE #1259] [Suggestion] We need to introduct a pagination module. #810

New issue

Open

opened 2026-03-02 16:01:34 +03:00 by kerem · 2 comments

kerem commented

2026-03-02 16:01:34 +03:00

Owner

Originally created by @leemgs on GitHub (Dec 8, 2024).
Original GitHub issue: https://github.com/prasathmani/tinyfilemanager/issues/1259

1.Background:

When too many files are displayed on a webpage, it becomes inconvenient to browse and negatively affects usability. Therefore, it's necessary to improve the UI. For example, adding a pagination feature to display files in sets of 15 when the number of files exceeds 15 would be a good solution.

2. Patch code:

$ git diff  ./tinyfilemanager.php
diff --git a/tinyfilemanager.php b/tinyfilemanager.php
index a740dcb..4d0f97f 100644
--- a/tinyfilemanager.php
+++ b/tinyfilemanager.php
 // Global readonly, including when auth is not being used
@@ -53,6 +55,10 @@ $highlightjs_style = 'vs';
 // Enable ace.js (https://ace.c9.io/) on view's page
 $edit_files = true;

+
+// Pagination. Sets the number of items to display per page (default is 15)
+$items_per_page = 15;
+
 // Default timezone for date() and time()
 // Doc - http://php.net/manual/en/timezones.php
 // $default_timezone = 'Etc/UTC'; // UTC
@@ -2109,8 +2115,15 @@ fm_show_nav_path(FM_PATH); // current path
 // show alert messages
 fm_show_message();

+// pagination
+$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
 $num_files = count($files);
 $num_folders = count($folders);
+$total_items = $num_files + $num_folders;
+$total_pages = ceil($total_items / $items_per_page);
+$start_index = ($current_page - 1) * $items_per_page;
+$end_index = min($start_index + $items_per_page, $total_items);
+
 $all_files_size = 0;
 $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white";
 ?>
@@ -2156,7 +2169,10 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white
                 <?php
             }
             $ii = 3399;
+            $item_counter = 0;
             foreach ($folders as $f) {
+                if ($item_counter < $start_index || $item_counter >= $end_index) { $item_counter++; continue; }
+                $item_counter++;
                 $is_link = is_link($path . '/' . $f);
                 $img = $is_link ? 'icon-link_folder' : 'fa fa-folder-o';
                 $modif_raw = filemtime($path . '/' . $f);
@@ -2214,6 +2230,8 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white
             }
             $ik = 6070;
             foreach ($files as $f) {
+                if ($item_counter < $start_index || $item_counter >= $end_index) { $item_counter++; continue; }
+                $item_counter++;
                 $is_link = is_link($path . '/' . $f);
                 $img = $is_link ? 'fa fa-file-text-o' : fm_get_file_icon_class($path . '/' . $f);
                 $modif_raw = filemtime($path . '/' . $f);
@@ -2333,6 +2351,26 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white
     </div>
 </form>

+<nav aria-label="Page navigation">
+  <ul class="pagination justify-content-center mt-3">
+  <?php
+    for ($i = 1; $i <= $total_pages; $i++) {
+        $active = ($i == $current_page) ? 'active' : '';
+        echo "<li class='page-item $active'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=$i'>$i</a></li>";
+    }
+
+    if ($total_pages > 1) {
+        if ($current_page > 1) {
+            echo "<li class='page-item'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=" . ($current_page - 1) . "'>«</a></li>";
+        }
+        if ($current_page < $total_pages) {
+            echo "<li class='page-item'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=" . ($current_page + 1) . "'>»</a></li>";
+        }
+    }
+  ?>
+  </ul>
+</nav>
+
 <?php
 fm_show_footer();

3. Screenshot (Expected output):

Originally created by @leemgs on GitHub (Dec 8, 2024). Original GitHub issue: https://github.com/prasathmani/tinyfilemanager/issues/1259 ### 1.Background: When too many files are displayed on a webpage, it becomes inconvenient to browse and negatively affects usability. Therefore, it's necessary to improve the UI. For example, adding a pagination feature to display files in sets of 15 when the number of files exceeds 15 would be a good solution. ### 2. Patch code: ```php $ git diff ./tinyfilemanager.php diff --git a/tinyfilemanager.php b/tinyfilemanager.php index a740dcb..4d0f97f 100644 --- a/tinyfilemanager.php +++ b/tinyfilemanager.php // Global readonly, including when auth is not being used @@ -53,6 +55,10 @@ $highlightjs_style = 'vs'; // Enable ace.js (https://ace.c9.io/) on view's page $edit_files = true; + +// Pagination. Sets the number of items to display per page (default is 15) +$items_per_page = 15; + // Default timezone for date() and time() // Doc - http://php.net/manual/en/timezones.php // $default_timezone = 'Etc/UTC'; // UTC @@ -2109,8 +2115,15 @@ fm_show_nav_path(FM_PATH); // current path // show alert messages fm_show_message(); +// pagination +$current_page = isset($_GET['page']) ? (int)$_GET['page'] : 1; $num_files = count($files); $num_folders = count($folders); +$total_items = $num_files + $num_folders; +$total_pages = ceil($total_items / $items_per_page); +$start_index = ($current_page - 1) * $items_per_page; +$end_index = min($start_index + $items_per_page, $total_items); + $all_files_size = 0; $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white"; ?> @@ -2156,7 +2169,10 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white <?php } $ii = 3399; + $item_counter = 0; foreach ($folders as $f) { + if ($item_counter < $start_index || $item_counter >= $end_index) { $item_counter++; continue; } + $item_counter++; $is_link = is_link($path . '/' . $f); $img = $is_link ? 'icon-link_folder' : 'fa fa-folder-o'; $modif_raw = filemtime($path . '/' . $f); @@ -2214,6 +2230,8 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white } $ik = 6070; foreach ($files as $f) { + if ($item_counter < $start_index || $item_counter >= $end_index) { $item_counter++; continue; } + $item_counter++; $is_link = is_link($path . '/' . $f); $img = $is_link ? 'fa fa-file-text-o' : fm_get_file_icon_class($path . '/' . $f); $modif_raw = filemtime($path . '/' . $f); @@ -2333,6 +2351,26 @@ $tableTheme = (FM_THEME == "dark") ? "text-white bg-dark table-dark" : "bg-white </div> </form> +<nav aria-label="Page navigation"> + <ul class="pagination justify-content-center mt-3"> + <?php + for ($i = 1; $i <= $total_pages; $i++) { + $active = ($i == $current_page) ? 'active' : ''; + echo "<li class='page-item $active'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=$i'>$i</a></li>"; + } + + if ($total_pages > 1) { + if ($current_page > 1) { + echo "<li class='page-item'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=" . ($current_page - 1) . "'>«</a></li>"; + } + if ($current_page < $total_pages) { + echo "<li class='page-item'><a class='page-link' href='?p=" . urlencode(FM_PATH) . "&page=" . ($current_page + 1) . "'>»</a></li>"; + } + } + ?> + </ul> +</nav> + <?php fm_show_footer(); ``` ### 3. Screenshot (Expected output): ![image](https://github.com/user-attachments/assets/4a666047-3303-4070-82f7-91e6e4a9045e)

kerem commented

2026-03-02 16:01:35 +03:00

Author

Owner

@leemgs commented on GitHub (Dec 8, 2024):

@prasathmani PTAL,

@leemgs commented on GitHub (Dec 8, 2024): @prasathmani PTAL,

kerem commented

2026-03-02 16:01:35 +03:00

Author

Owner

@prasathmani commented on GitHub (Dec 9, 2024):