При клике на заголовок таблицы отсортировать таблицу
Дано: 4 заказа(массив массивов), в каждом по 5 пунктов(массив объектов)(ручка, карандаш, линейка и т.д.). В каждом пункте 4 параметра: номер пункта, название(ручка, карандаш...)(поля объекта). Данные я отрисовываю в таблицу. После клика по одному из заголовков таблицы(id, название...), нужно отсортировать таблицу по данному критерию. Но вот беда: если текст в заголовках("Номер", "Название"), а название полей в объекте: name, id. Как определить по какому параметру сортировать? Вот, допустим, я кликнул по столбцу "Имя". Как дать понять программе, что нужно сортировать по полю name в объекте?
|
Neo54213,
Цитата:
Цитата:
Сортируйте таблицу https://learn.javascript.ru/task/sort-table |
Ну я написал код таким образом, что таблица отрисовывается и сортируется по имени. После по нажатию на заголовок столбца(th) нужно отсортировать таблицу по указанному критерию(т.е. нажали на th "Название" - сортируем по названию. Нажали на th с текстом "Номер" сортируем по id.
|
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']; Это костыль. |
Цитата:
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)
})
};
|
А если без массива fieldsName? Ведь это дублирующиеся данные. Эти ключи у меня уже есть в объекте.
|
Neo54213,
:-? superSort(i) |
рони,
итак, 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');
}
|
| Часовой пояс GMT +3, время: 01:58. |