как сортировать папки и файлы в таблице с помощью jquery javascript

Question

Для управления файлами у меня есть 2 столбца:

name, в котором находятся папки (каталоги) и файлы

extension которые дают мне расширение файлов (пустое расширение папки)

Когда я нажимаю на name, файлы и папки сортируются в алфавитном порядке. Но он не сортирует папки в первую очередь. когда я нажимаю extension, сначала сортируются папки, но не по алфавиту.

Чего я хочу достичь:

1. Сначала сортируйте папки, а также по алфавиту.
2. Сортировка должна быть по умолчанию при загрузке страницы, а не после события клика

HTML:

<table>
  <thead>
    <tr>
      <th class="name header-item"><a id="name" class="filter-link" href="#">Name</a></th>  
      <th class="extension header-item"><a id="extension" class="filter-link" href="#">Ext</a></th>
    </tr>
  </thead>
  <tbody class="table-content">
    <tr class="table-row">
      <td class="table-data">bbb</td>
      <td class="table-data"></td>
    </tr>
    <tr class="table-row">
      <td class="table-data">ccc.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">aaa.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">ccc</td>
      <td class="table-data"></td>
    </tr>
    <tr class="table-row">
      <td class="table-data">bbb.jpg</td>
      <td class="table-data">jpg</td>
    </tr>
    <tr class="table-row">
      <td class="table-data">aaa</td>
      <td class="table-data"></td>
    </tr>
  </tbody>
</table>

JQuery:

var properties = [
  'name',
  'extension'
];

    $.each( properties, function( i, val ) {

        var orderClass = '';

        $(document).on('click','#' + val,function(e) {  

            e.preventDefault();
            $('.filter-link.filter-link-active').not(this).removeClass('filter-link-active').children('i').show();
            $(this).toggleClass('filter-link-active');
            $('.filter-link').removeClass('asc desc').children('i').show();

            if(orderClass == 'desc' || orderClass == '') {
                $(this).addClass('asc');
                $(this).children('i').hide();                   
                    orderClass = 'asc';
            } else {
                $(this).addClass('desc');
                $(this).children('i').hide();                   
                orderClass = 'desc';
            }

            var parent = $(this).closest('.header-item');
            var index = $(".header-item").index(parent);
            var $table = $('.table-content');
            var rows = $table.find('.table-row').get();
            var isSelected = $(this).hasClass('filter-link-active');
            var isNumber = $(this).hasClass('filter-link-number');

            rows.sort(function(a, b){

                var x = $(a).find('.table-data').eq(index).text();
                    var y = $(b).find('.table-data').eq(index).text();

                if(isNumber == true) {

                    if(isSelected) {
                        return x - y;
                    } else {
                        return y - x;
                    }

                } else {

                    if(isSelected) {        
                        if(x < y) return -1;
                        if(x > y) return 1;
                        return 0;
                    } else {
                        if(x > y) return -1;
                        if(x < y) return 1;
                        return 0;
                    }
                }
            });

            $.each(rows, function(index,row) {
                $table.append(row);
            });

            return false;
        });

    });

Как мне этого добиться?

Вот скрипка кода: https://jsfiddle.net/82j0k3eu/

Answer 1

var properties = ['name', 'extension'];

$.each( properties, function( i, val ) {

    var orderClass = '';
    var folders = files = ''; /* declare empty variables */

    $(document).on('click','#' + val,function(e) {  

        e.preventDefault();
        $('.filter-link.filter-link-active').not(this).removeClass('filter-link-active').children('i').show();
        $(this).toggleClass('filter-link-active');
        $('.filter-link').removeClass('asc desc').children('i').show();

        if(orderClass == 'desc' || orderClass == '') {
            $(this).addClass('asc');
            $(this).children('i').hide();                   
                orderClass = 'asc';
        } else {
            $(this).addClass('desc');
            $(this).children('i').hide();                   
            orderClass = 'desc';
        }

        var parent = $(this).closest('.header-item');
        var index = $(".header-item").index(parent);
        var $table = $('.table-content');
        var rows = $table.find('.table-row').get();
        var isSelected = $(this).hasClass('filter-link-active');
        var isNumber = $(this).hasClass('filter-link-number');

        rows.sort(function(a, b){

            var x = $(a).find('.table-data').eq(index).text();
                var y = $(b).find('.table-data').eq(index).text();

            if(isNumber == true) {

                if(isSelected) {
                    return x - y;
                } else {
                    return y - x;
                }

            } else {

                if(isSelected) {        
                    if(x < y) return -1;
                    if(x > y) return 1;
                    return 0;
                } else {
                    if(x > y) return -1;
                    if(x < y) return 1;
                    return 0;
                }
            }
        });

        $.each(rows, function(index,row) {
            if $(this).children('td').eq(1).text() == '' /* check if there's an extension, no extension = folder */
            folders += row;
            else files += row
        });

        $table.append(folders);
        $table.append(files);

        return false;
    });

});