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']; Это костыль.
