Question

我正在尝试制作排序功能，它有效。但我想把反之亦然（上下）2路方式。目前我得到一种方式sort有效，当用户点击后我想按相反的方向排序。

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

＆＃13;

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'));

＆＃13;

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

＆＃13;

<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>

＆＃13;

条件：

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");
});

Answer 2

我使用变量排序来跟踪当前的排序方向

sort = 0 //没有排序

sort = 1 //排序

sort = 2 //排序

var sort=0;
    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();
             if(sort==0||sort==2){
                sort=1;
            }else{
               sort=2; 
            }
            rows.sort(function(a, b) {
               var A = $(a).children('td').eq(index).text().toUpperCase();
               var B = $(b).children('td').eq(index).text().toUpperCase();
               if(sort==0||sort==2){
               return A < B ? -1 : A > B ? 1 : 0;
               }else{
               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>

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

2 个答案: