Feature: Sortable by file size

Greetings,

I recently used your plugin to compress PNG images on my website, and I must say, it worked perfectly and saved me a great deal of time.

However, one feature I found missing—and ended up adding myself—was the ability to sort images by file size. I didn’t want to process all images, only the larger ones, so being able to sort by size made it much easier to identify large files and convert them to JPEG.

Here’s the code I added, which you can incorporate into your plugin. If you have a Git repository, I’d be happy to contribute directly there, but unfortunately, SVN doesn’t work for me. Otherwise, feel free to add it yourself—I believe it’s a feature many others would find useful.

To begin, add id to the table

<table id="JpgToPngTable" class="wp-list-table widefat striped media">

Replace <th> for the file size with

<th onclick="sortTable(2)" class="sortable sorted">
						<a href="#">
							<span><?php _e('Filesize', 'png_to_jpg') ?></span>
							<span class="sorting-indicators">
								<span class="sorting-indicator asc" aria-hidden="true"></span>
								<span class="sorting-indicator desc" aria-hidden="true"></span>
							</span>
						</a>
					</th>

JS Function to sort by size

function sortTable(columnIndex, event) {
				const table = document.getElementById("JpgToPngTable");
				const rows = Array.from(table.rows).slice(1); // Exclude the header row
				const headers = table.querySelectorAll("th"); // Get all headers
				const currentHeader = headers[columnIndex]; // Get the header for the clicked column
				let ascending = currentHeader.getAttribute("data-sort-asc") === "true"; // Track sorting direction from th

				// Remove focus from the <a> element after the click
				if (event && event.target && event.target.closest("a")) {
					event.target.closest("a").blur();
				}

				// Helper function to convert file size strings to bytes
				function fileSizeToBytes(sizeStr) {
					const size = parseFloat(sizeStr); // Extract the numeric part
					const unit = sizeStr.replace(/[0-9.]/g, '').trim().toUpperCase(); // Extract the unit (KB, MB, etc.)

					switch (unit) {
						case 'KB':
							return size * 1024;
						case 'MB':
							return size * 1024 * 1024;
						case 'GB':
							return size * 1024 * 1024 * 1024;
						default:
							return size; // In case no unit is present or unrecognized (assume bytes)
					}
				}

				// Sort rows based on the clicked column (file size conversion)
				rows.sort((rowA, rowB) => {
					const cellA = rowA.cells[columnIndex].innerText.toLowerCase();
					const cellB = rowB.cells[columnIndex].innerText.toLowerCase();

					const sizeA = fileSizeToBytes(cellA);
					const sizeB = fileSizeToBytes(cellB);

					return ascending ? sizeA - sizeB : sizeB - sizeA; // Compare sizes numerically
				});

				// Append sorted rows back to the table
				rows.forEach(row => table.tBodies[0].appendChild(row));

				// Remove any previously added 'asc' or 'desc' class from all headers
				headers.forEach(header => {
					header.classList.remove("asc", "desc");
					header.removeAttribute("data-sort-asc"); // Clear the sort order attribute for other headers
				});

				// Add 'asc' or 'desc' class based on the sorting direction
				if (ascending) {
					currentHeader.classList.add("asc");
					currentHeader.classList.remove("desc");
				} else {
					currentHeader.classList.add("desc");
					currentHeader.classList.remove("asc");
				}

				// Toggle sorting direction for the clicked column
				currentHeader.setAttribute("data-sort-asc", !ascending);
			}

View post on imgur.com