jquery - 如何制作2路 `up`和 `down` td文本 `sort`

Question

我正在尝试创建一个排序函数，它有效。但我想采用反之亦然(向上和向下)排序的两种方法。目前我正在使用一种sort工作方式，当用户点击返回时我想按相反方向排序。

我仍然添加了我的条件不起作用:

var tableMaker = function (columNames, parent, data) {
    var table = $('<table />', {
        id:"example",
        class:"table table-striped table-bordered"
    })
    .append($('<thead><tr><th>Select All <input type="checkbox" /></th></tr></thead>'))
    .append($('<tbody></tbody>'));
   // .append($('<tfoot><tr></tr></tfoot>'));
   
    var thead = columNames.map(function (item) {
        return "<th>" + item + " <button class="+item.replace(' ', '')+">Sort</button></th>";
    });
    
    var tbody = data.map(function (item, index) {
        var tr = $('<tr />', {id:item.ID});
            tr.append('<td><input type="checkbox" /></td>')
        columNames.map(function (label) {
            var label = label.replace(' ', '');
            var labelData = item[label];
            tr.append('<td>' + labelData + '</td>')
        });
        return tr;
    });
    
    table
    .find('thead tr')
    .append(thead).end()
    .find('tfoot tr')
    .append(thead).end()
    .find('tbody')
    .append(tbody)
    parent.append(table); //appending to parent
    
    //events goes here
    
    $('button').on('click', function () {
        var rows = $(this).parents('table').find('tbody tr');
        var index = $(this).parent().index();
       
        rows.sort(function(a, b) {
           var A = $(a).children('td').eq(index).text().toUpperCase();
           var B = $(b).children('td').eq(index).text().toUpperCase();
           return A < B ? -1 : A > B ? 1 : 0;
       });
        
       $(this).parents('table').find('tbody').append(rows);
        
    });
    
};

var initTable = function (parent) {
    var columNames = ['Organization Name', 'Zip Code', 'Telephone', 'Organization TypeName' ];

    var data = $.getJSON('https://tcs.firebaseio.com/d/DocPageDetails/d/Organizations.json');
    
    data.done(function (data) {
        tableMaker(columNames, parent, data);
    });
}

initTable($('#container'));

body { font-size: 140%; }
#container table {

}

button {
    font-size:80%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container"></div>

条件:

return A < B ? -1 : A > B ? 1 : 0;

Answer 1

我将添加一个元素来指示第 th 中的排序方向(默认为 -):

.append($('<thead><tr><th>Select All <input type="checkbox" /><span id="direction">-</span></th></tr></thead>'))

然后更改点击以阅读并根据此进行不同的行为:

$('button').on('click', function () {
    var table = $(this).parents('table');
    var rows = table.find('tbody tr');
    var index = $(this).parent().index();
    var direction_span = table.find('thead th span');
    var direction_text = direction_span.text();
    var direction = (direction_text == "-" ? 0 :
                       (direction_text == "U" ? 1 : -1));

    rows.sort(function(a, b) {
       var A = $(a).children('td').eq(index).text().toUpperCase();
       var B = $(b).children('td').eq(index).text().toUpperCase();
       //reverse the sort relative to the direction
       if(direction<=0)
          return A < B ? -1 : A > B ? 1 : 0;
       else
          return A > B ? -1 : A > B ? 1 : 0;
   });

   table.find('tbody').append(rows);

   //then reverse the direction symbol
   if(direction<=0)
     direction_span.text("U");
   else
     direction_span.text("D");
});