如何使用导入的 JSON 数据对表进行排序

Question

我有一个包含员工列表的 JSON 文件。我将此数据导入表。下一步是按<th> 添加排序。我的脚本不起作用，没有任何反应。我不知道原因。我只是一个JS初学者。你能帮我解释一下为什么排序不起作用吗？

这是我的存储库： https://github.com/rrajca/Employee-table

我的js是：

$(document).ready(function() {
    $.getJSON("dane.json", function(data) {
        /* var sortedList = data.sort(function(a, b) {
            return a.id - b.id;
          }) */
        var employeeList = "";
        $.each(data, function(key, value) {
            employeeList += "<tr>";
            employeeList += "<td>"+value.id+"</td>";
            employeeList += "<td>"+value.firstName+"</td>";
            employeeList += "<td>"+value.lastName+"</td>";
            employeeList += "<td>"+value.dateOfBirth+"</td>";
            employeeList += "<td>"+value.company+"</td>";
            employeeList += "<td>"+value.note+"</td>";
            employeeList += "</tr>";
        })
        $("tbody").append(employeeList);
    })

    var compare = {
        name: function(a, b) {
            a = a.replace(/^the /i, '');
            b = b.replace(/^the /i, '');

            if (a < b) {
                return -1;
            } else {
                return a > b ? 1 : 0;
            }
        },
        duration: function(a, b) {
            a = a.split(':');
            b = b.split(':');

            a = Number(a[0]) * 60 + Number(a[1]);
            b = Number(b[0]) * 60 + Number(b[1]);

            return a - b;
        },
        date: function(a, b) {
            a = new Date(a);
            b = new Date(b);

            return a - b;
        }
    };

    $('.sortable').each(function() {
        var $table = $(this);
        var $tbody = $table.find('tbody');
        var $controls = $table.find('th');
        var rows = $tbody.find('tr').toArray();

        $controls.on('click', function() {
            var $header = $(this);
            var order = $header.data('sort');
            var column;

            if ($header.is('.ascending') || $header.is('.descending')) {  
                $header.toggleClass('ascending descending');
                $tbody.append(rows.reverse());
            } else {
                $header.addClass('ascending');
                $header.siblings().removeClass('ascending descending'); 
                if (compare.hasOwnProperty(order)) {
                    column = $controls.index(this);

                    rows.sort(function(a, b) {
                        a = $(a).find('td').eq(column).text();
                        b = $(b).find('td').eq(column).text();
                        return compare[order](a, b);
                        });

                $tbody.append(rows);
                }
            }
        });
    });
});

Answer 1

将比较函数更改为：

name: function(a, b) {                  // Add a method called name
      a = a.replace(/^the /i, '');          // Remove The from start of parameter
      b = b.replace(/^the /i, '');          // Remove The from start of parameter
      if(parseInt(a) == +a) {
        a = +a;
        b = +b;            
      }     
      return a > b          
    }

问题是您对所有内容都进行了字符串比较。所以我添加了一个检查，看看它是否是一个数字，并适当地投射。

https://jsfiddle.net/gj2vonsL/7/

您编写的其他比较函数还有其他问题，例如无效的日期格式等。但是您的总体想法是正确的