【问题标题】:Jquery sort table data with numbersJquery用数字对表格数据进行排序
【发布时间】:2018-02-24 13:42:33
【问题描述】:

jquery 用数字对表格数据进行排序

我已按升序对该表进行了排序,但我希望它按 a1、a2、a3、a11 的顺序排列。

有人可以帮忙吗?

function sortTable(table, order) {
        var asc   = order === 'asc',
            tbody = table.find('tbody');
        tbody.find('tr').sort(function(a, b) {
            if (asc) {
                return jQuery('td:first', a).text().localeCompare(jQuery('td:first', b).text());
        } else {
            return jQuery('td:first', b).text().localeCompare(jQuery('td:first', a).text());
        }
        }).appendTo(tbody);
        }

        sortTable($('#mytable'),'asc');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table name="mytable" id="mytable">
  <tbody>
    <tr><td>a 11</td></tr>
    <tr><td>a 3</td></tr>
    <tr><td>a 2</td></tr>
    <tr><td>a 1</td></tr>
  </tbody>
</table>

【问题讨论】:

  • 请记住 .sort() 函数按字典顺序排序,这意味着 11 将始终位于 1 之后但在 2 之前。如果你想找自然排序,可以试试第三方插件,比如:natsort。 StackOverflow 上也有其他解决方案,只需搜索自然排序即可。

标签: javascript jquery sorting tablesort


【解决方案1】:

由于比较是从左到右进行的,您可以尝试用零填充数字,例如 01、02、03、11

【讨论】:

  • 嘿,谢谢你的回答。但我只希望它像 1,2,3 一样。不能加 0。
【解决方案2】:

@Nenad 说得通:'kn' 似乎不起作用,请在 .localeCompare() 中使用选项 numeric,例如:

.localeCompare(jQuery('td:first', b).text(),'en',{numeric:true});

这将解决编号问题。见这里:https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

【讨论】:

    【解决方案3】:

    你可以设置options参数为{numeric: true }

    var sorted = $('#mytable tbody tr').sort(function(a, b) {
      var a = $(a).find('td:first').text(), b = $(b).find('td:first').text();
      return a.localeCompare(b, false, {numeric: true})
    })
    
    $('#mytable tbody').html(sorted)
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table name="mytable" id="mytable">
      <tbody>
        <tr><td>a 11</td></tr>
        <tr><td>a 3</td></tr>
        <tr><td>a 2</td></tr>
        <tr><td>a 1</td></tr>
      </tbody>
    </table>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-27
      • 1970-01-01
      • 2019-07-24
      相关资源
      最近更新 更多