[Suggestion] We need to introduct a pagination module.

[leemgs]

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):

[leemgs]

@prasathmani PTAL,

[prasathmani]

I appreciate you sharing the code, I'll take a look.