How to sort file name into existing file names on the page

[SarahBear]

I was wondering how I would go about doing a sorting of a new element being added on the page.  This element would have to be alphabetically sorted into the existing elements onto the page.  For example:  I am making a file manager, so when a user creates a new file, it would be sorted into the already existing files and displayed in the spot that it should.

 

All necessary details would be provided by PHP, so I would only need help with the JavaScript part.

 

Honestly, I have no clue how I would get around to doing that.  I was thinking earlier that it would involve looping through each class of file_name and getting the text() value.  Then add all of the values into an array and sorting it somehow.  Then it would be getting the <tr> of which file_name is before it, and then append under it somehow.

 

I'm not asking for any free code, but I was wondering which (JavaScript/JQuery) functions I would be looking for.  I was also wondering if the idea I had would be beneficial or not, or if there were any other ways.  Here is how the files are displayed as is:

<?php
// There may be undefined variables, this is only part of it

$return = '<table id="manager" class="table table-bordered">
<thead>
 <tr class="table_header">
   <th><input id="select" type="checkbox"></th>
   <th>Name</th>
   <th>Size</th>
   <th>Last Modified</th>
   <th>Type</th>
   <th>Permissions</th>
   <th></th>
 </tr>
</thead>
<tbody>';
 
$path = $_SERVER['DOCUMENT_ROOT'];
 
// Scan the directory and remove the paths from the result
$files = array_diff(scandir($path), array(".", ".."));
 
// Get the number of files in the directory
$num_files = count($files);
 
// If there are no files in the directory, return the empty directory variable we defined earlier
if($num_files == 0)
    return $empty_dir;
 
$directory_array = array();
$file_array = array();
foreach($files as $file) {
 
    // Set the path correctly
    $file_path = $path."/".$file;
 
    // If the item is a directory
    if(is_dir($file_path))
        $directory_array[] = $file;
    // The item is a file
    else
        $file_array[] = $file;
 
}
 
// Sort each of the arrays alphabetically
sort($directory_array);
sort($file_array);
 
// Merge the directories and files into one array - directories shown first
$files = array_merge($directory_array, $file_array);
 
// Loop through the items
foreach($files as $file) {
 
    $file_name = $file;
    // Set the path correctly
    $file = $path."/".$file;
 
    // Get the information for the file
    if(is_dir($file))
        $file_size = "--";
    else
        $file_size = @filesize($file);
 
    if($file_size === false) {
 
        $checkbox = '<input id="files_check" type="checkbox" name="files[]" value="'.htmlentities($file_name).'">';
        $file_name = htmlentities($file_name). " - <b>Fatal Error Reading</b>";
        $file_size = "--";
        $last_modified = "--";
        $type = "--";
        $permissions = "--";
        $actions = "--";
 
    } else {
 
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
 
        $checkbox = '<input id="files_check" type="checkbox" name="files[]" value="'.htmlentities($file_name).'">';
 
        if(is_dir($file)) {
 
            $file_name = '<i class="icon-folder-open"></i> <a href="manager.php?path='.htmlentities($file_name).'/">'.htmlentities($file_name).'</a>';
 
        } else {
 
            $file_name = '<i class="icon-file"></i> <a href="manager/view_contents.php?file=/'.htmlentities($file_name).'&token='.htmlentities($_SESSION['secure_token']).'">'.htmlentities($file_name).'</a>';
 
        }
 
        $file_size = htmlentities(get_appropriate_size($file_size));
        $last_modified = htmlentities(get_appropriate_date(filemtime($file)));
        $type = htmlentities(finfo_file($finfo, $file));
        $permissions = htmlentities(substr(sprintf('%o', fileperms($file)), -4));
        $actions = '<i class="actions"></i>';
 
    }
 
 
    $return .= "<tr>
<td>{$checkbox}</td>
<td class='file_name'>{$file_name}</td>
<td>{$file_size}</td>
<td>{$last_modified}</td>
<td>{$type}</td>
<td class='permissions'>{$permissions}</td>
<td class='action'>{$actions}</td>
 </tr>";
 
 
}
 
$return .= '</tbody>
</table>';
 
return $return;
?>

[SarahBear]

This has been solved.  It wasn't too hard after jumping in to it.

 

The problem with just looping through each file_name class was that it also contained directories which I wanted sorted and displayed first.  So I just added a class to the <a> tag that contained the file name - distinguishing if it was a directory or not.  For anyone who comes across an issue like this later, here is how I did it with the JavaScript:

var files = [];
var directories = [];
 
// Loop through each directory and add it to the directories array
$('.is_dir').each(function(key, value) {
  directories.push(value.innerText);
});
 
// Loop through each file and add it to the files array
$('.is_file').each(function(key, value) {
  files.push(value.innerText);
});
 
// Add the file we just created to the files array
files.push($.trim(name));
 
// Sort both of the arrays alphabetically
directories.sort();
files.sort();
 
// Merge the two arrays - we now have a fully sorted order
var new_order = $.merge(directories, files);
 
var new_file_index = jQuery.inArray($.trim(name), new_order);
 
$('tr').each(function(key, value) {
 
  if(new_file_index - key == 0)
    $(this).after("-- my content --");
 
});