【问题标题】:Sort html table rows by first date column with jQuery使用jQuery按第一个日期列对html表格行进行排序
【发布时间】:2017-03-31 16:14:29
【问题描述】:

我有一个表格,每行有两个日期列,开始日期和结束日期 我想用 jQuery 按开始日期对表格行进行排序

下面是表格html代码:

<table class="table-bordered">
  <thead>
    <tr class="Headers">
      <th>Number</th>
      <th>Date Start</a></th>
      <th>Date End</th>
    </tr>
  </thead>
  <tbody>
    <tr class="Entries" data-id="13">
      <td data-field-type="string">1234</td>
      <td data-field-type="date">01-04-2015</td>
      <td data-field-type="date">01-04-2015</td>
    </tr>
    <tr class="Entries" data-id="24">
      <td data-field-type="string">1352</td>
      <td data-field-type="date">04-10-2012</td>
      <td data-field-type="date">23-10-2015</td>
    </tr>
    <tr class="Entries" data-id="8">
      <td data-field-type="string">1124</td>
      <td data-field-type="date">13-05-2014</td>
      <td data-field-type="date">01-04-2015</td>
    </tr>
    <tr class="Entries" data-id="23">
      <td data-field-type="string">1652</td>
      <td data-field-type="date">07-11-2013</td>
      <td data-field-type="date">22-10-2015</td>
    </tr>
  </tbody>
</table>

我尝试使用here 发布的类似解决方案,但没有成功。 JSFiddle

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    看看这个网站。看起来这就是你想要做的。 http://www.kryogenix.org/code/browser/sorttable/

    【讨论】:

    • 不错的插件 :) 谢谢。
    【解决方案2】:

    我建议:

    $('tr.Entries').each(function() {
         var t = this.cells[1].textContent.split('-');
         $(this).data('_ts', new Date(t[2], t[1]-1, t[0]).getTime());
    }).sort(function (a, b) {
        return $(a).data('_ts') < $(b).data('_ts');
    }).appendTo('tbody');
    

    http://jsfiddle.net/rmva17gr/

    【讨论】:

    • 非常感谢您的建议!我想问一下是否可以使用 jQuery 按两个单元格对 html 表格行进行排序,例如按第一个单元格名称,然后按第二个单元格日期,类似于 MYSQL ORDER BY name,date DESC 中的行,因此在日期排序中行将按相同的名称进行分组。
    • @stav 欢迎您! JavaScript 不像 SQL 那样工作,但 sort 方法本身足够灵活,可以做你想做的事,这里有一个演示:jsbin.com/nuvudaboto/1/edit?html,js,output。基本上它按第二个单元格排序,然后按第一个单元格排序。
    • 也许我必须将此作为新问题发布,但我会在这里问。我按第一个单元格然后按第二个单元格反转了您的代码排序,但我无法使其工作:(。这是我所做的演示jsbin.com/gabavonezi/1/edit,这是我需要的jsbin.com/dodawoqoqu/1/edit
    • @stav 您应该删除 + 运算符。我曾使用+ 将操作数转换为数字。由于内容以字母开头,因此所有内容都返回NaN(不是数字)。
    • 是的,它对我有用,但我在包含日期的输入字段上使用 datepicker,并且在缩短 datepicker 后停止工作,我再次重新初始化它但没有工作..
    【解决方案3】:

    当您将字符串传递给Date 构造函数时,其格式为month/date/year

    因为您的日期格式是date-month-year。您可以使用正则表达式重新格式化它。

    $('tr.Entries').sort(function (a, b) {
        return new Date($(a).find($("[data-field-type='date']")).html().replace(/(\d{2})-(\d{2})-(\d{2})/g,'$2/$1/$3')).getTime() < new Date($(b).find($("[data-field-type='date']")).html().replace(/(\d{2})-(\d{2})-(\d{2})/g,'$2/$1/$3')).getTime()
    }).appendTo('tbody');
    

    【讨论】:

    • 谢谢!你是对的,你对代码的改变工作正常。我接受了 Vohuman 的建议,因为我认为该代码在更大的数据行上运行得更快
    猜你喜欢
    • 2018-12-06
    • 2017-07-19
    • 2011-11-25
    • 1970-01-01
    • 2020-01-15
    • 1970-01-01
    • 2011-10-19
    • 2014-08-30
    • 1970-01-01
    相关资源
    最近更新 更多