При клике на заголовок таблицы отсортировать таблицу

[Neo54213]

Дано: 4 заказа(массив массивов), в каждом по 5 пунктов(массив объектов)(ручка, карандаш, линейка и т.д.). В каждом пункте 4 параметра: номер пункта, название(ручка, карандаш...)(поля объекта). Данные я отрисовываю в таблицу. После клика по одному из заголовков таблицы(id, название...), нужно отсортировать таблицу по данному критерию. Но вот беда: если текст в заголовках("Номер", "Название"), а название полей в объекте: name, id. Как определить по какому параметру сортировать? Вот, допустим, я кликнул по столбцу "Имя". Как дать понять программе, что нужно сортировать по полю name в объекте?

[Dilettante_Pro]

Neo54213,

Данные я отрисовываю в таблицу.

а название полей в объекте: name, id.

Вы уже нарисовали таблицу - зачем вам объект?
Сортируйте таблицу
https://learn.javascript.ru/task/sort-table

[Neo54213]

Ну я написал код таким образом, что таблица отрисовывается и сортируется по имени. После по нажатию на заголовок столбца(th) нужно отсортировать таблицу по указанному критерию(т.е. нажали на th "Название" - сортируем по названию. Нажали на th с текстом "Номер" сортируем по id.

[рони]

Neo54213,
на форуме масса примеров сортировки таблиц, и может вы покажите ваш код?

[рони]

Neo54213,
сортировка таблицы по клику на ячейку первой строки

[Neo54213]

var headers = ['Номер', 'Название', 'Количество', 'Цена'];
var fieldsNames = ['id', 'name', 'count', 'price'];
var orders = [
    [
        {
            id: 1,
            name: "Book",
            count: 3,
            price: 157
        },
        {
            id: 2,
            name: "Pen",
            count: 4,
            price: 85
        },
        {
            id: 3,
            name: "Phone",
            count: 1,
            price: 464
        },
        {
            id: 4,
            name: "Pencil",
            count: 65,
            price: 314
        },
        {
            id: 5,
            name: "Sharpener",
            count: 6,
            price: 96
        }
    ],
    [
        {
            id: 1,
            name: "Tape",
            count: 5,
            price: 543
        },
        {
            id: 2,
            name: "Textbook",
            count: 65,
            price: 314
        },
        {
            id: 3,
            name: "Pencil case",
            count: 35,
            price: 346
        },
        {
            id: 4,
            name: "Desk",
            count: 5,
            price: 4314
        },
        {
            id: 5,
            name: "Marker",
            count: 5,
            price: 145
        }
    ],
    [
        {
            id: 1,
            name: "Paper",
            count: 5,
            price: 87
        },
        {
            id: 2,
            name: "Chalk",
            count: 6,
            price: 435
        },
        {
            id: 3,
            name: "Clock",
            count: 8,
            price: 563
        },
        {
            id: 4,
            name: "Ruler",
            count: 22,
            price: 457
        },
        {
            id: 5,
            name: "Globe",
            count: 7,
            price: 789
        }
    ],
    [
        {
            id: 1,
            name: "Chair",
            count: 2,
            price: 54
        },
        {
            id: 2,
            name: "Eraser",
            count: 56,
            price: 2445
        },
        {
            id: 3,
            name: "Map",
            count: 11,
            price: 345
        },
        {
            id: 4,
            name: "Scissors",
            count: 24,
            price: 451
        },
        {
            id: 5,
            name: "Notebook",
            count: 32,
            price: 654
        }
    ]
];

function clearSortImage(exceptionTHId) {
    $('th:not(th:nth-child(' + +(exceptionTHId+1) + '))')
        .removeClass('asc')
        .removeClass('desc')
        .find('.indicator-image').hide();
}
function drawTabs() {
    for (var i = 0; i < orders.length; i++) {
        $('<div>', {
            text: 'Заказ ' + +(i+1),
            class: 'button order' + +(i+1),
            data: {
                id: i
            }
        }).appendTo($('header'));
    }
}
function drawTHs() {
    for (var i = 0; i < headers.length; i++) {
        var $thead = $('section #orderstable thead');
        var $th = $('<th>', {
            text: headers[i],
            data: {
                id: i
            }
        });

        var $indicatorImage = $('<img>', {
            alt: 'индикатор сортировки',
            class: 'indicator-image'
        });

        $th.prepend($indicatorImage);
        $thead.append($th);
    }
}
function sortTable(clickedHeader) {
    var $th = $('section #orderstable th');
    var headerIndex = $th.index($(clickedHeader));
    var fieldName = fieldsNames[headerIndex];
    var $divSelected = $('div.selected');
    var orderIdx = $divSelected.data('id');
    var order = orders[orderIdx];

    if($(clickedHeader).hasClass('asc')) {
        if (typeof order[0][fieldName] == "number") {
            order.sort(function (a, b) {
                return b[fieldName] - a[fieldName];
            });
        } else {
            order.sort(function (a, b) {
                if (a[fieldName] > b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] < b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('desc').removeClass('asc')
            .find('.indicator-image').attr('src', 'img/desc.png');
    }else{
        if(typeof order[0][fieldName] == "number"){
            order.sort(function(a, b) {
                return a[fieldName]-b[fieldName];
            });
        }else{
            order.sort(function(a, b) {
                if (a[fieldName] < b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] > b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('asc').removeClass('desc').find('.indicator-image').attr('src', 'img/asc.png');
    }
    $(clickedHeader).find('.indicator-image').show();

    $divSelected.click();
}

function drawTable(clickedButton) {
    var $tbody = $('#orderstable tbody')
    $tbody.empty();
    var orderIdx = $(clickedButton).data('id');
    var order = orders[orderIdx];
    for (var i = 0; i < order.length; i++) {
        var item = order[i];
        var $tr = $('<tr>');
        for (var column in item){
            var $td = $('<td>', {
                text: item[column]
            });
            $tr.append($td);
        }
        $tbody.append($tr);
    }
}

$(document).ready(function() {
    drawTabs();
    drawTHs();

    $('.button').on('click', function() {

        var $tbody = $('#orderstable tbody');
        if(!$(this).hasClass('selected')) {
            $('th').removeClass('asc')
                .removeClass('desc')
                .find('.indicator-image').hide();
        }

        $('.button').removeClass('selected');
        $(this).addClass('selected');

        drawTable(this);
    });

    $('th').on('click', function() {
        // var exceptionTHId = $(this).index();
        clearSortImage(/*exceptionTHId*/);
        sortTable(this);
    });

    $('section header .order2').click();
    $('#orderstable th.name').click();
});

Да мне просто ответ на вопрос нужен: как получить доступ к полю объекта? Вот, допустим, кликнул я по "Название". Как мне понять, что сортировать нужно по полю: name в объекте?

order.sort(function(a, b) {
                return a[fieldName]-b[fieldName];
            });

Вот этот кусок я написал, но как получить этот самый fieldName?
Вот во второй строке у меня то, чего быть не должно var fieldsNames = ['id', 'name', 'count', 'price']; Это костыль.

[рони]

как получить этот самый fieldName?

function drawTHs() {
    var $thead = $("section #orderstable thead");
    headers.forEach(function(text, i) {
        var fieldsName = fieldsNames[i];
        var $th = $("<th>", {
            click: function() {
                superSort(fieldsName)
            },
            text: text,
            data: {
                id: i
            }
        });
        var $indicatorImage = $("<img>", {
            alt: "индикатор сортировки",
            "class": "indicator-image"
        });
        $th.prepend($indicatorImage);
        $thead.append($th)
    })
};

[Neo54213]

А если без массива fieldsName? Ведь это дублирующиеся данные. Эти ключи у меня уже есть в объекте.

[рони]

Neo54213,
superSort(i)

[Neo54213]

рони,
итак, i это индекс th(начиная с нуля, первый th - i=0). Дальше мне в функции superSort(вот она кстати ниже) нужно отсортировать массив по какому-либо столбцу. Этот столбец, допустим, третий. Как теперь по индексу получить доступ к полю? Ну т.е. что нам это дает, что мы знаем номер столбца? Как я с помощью цифры, например, 1, которую мы передали в функцию superSort() при клике на th с текстом "Название", получу доступ к полю name в объекте?

var $th = $('section #orderstable th');
    var fieldName = // что сюда записать? массив fieldsNames отсутствует
    var $divSelected = $('div.selected');
    var orderIdx = $divSelected.data('id');
    var order = orders[orderIdx];
if($(clickedHeader).hasClass('asc')) {
        if (typeof order[0][fieldName] == "number") {
            order.sort(function (a, b) {
                return b[fieldName] - a[fieldName];
            });
        } else {
            order.sort(function (a, b) {
                if (a[fieldName] > b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] < b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('desc').removeClass('asc')
            .find('.indicator-image').attr('src', 'img/desc.png');
    }else{
        if(typeof order[0][fieldName] == "number"){
            order.sort(function(a, b) {
                return a[fieldName]-b[fieldName];
            });
        }else{
            order.sort(function(a, b) {
                if (a[fieldName] < b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] > b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('asc').removeClass('desc').find('.indicator-image').attr('src', 'img/asc.png');
    }