如何使用DataTables jquery插件按日期排序?

我正在使用datatables jquery插件,并希望按日期排序。

我知道他们有一个插件,但是我找不到从哪里实际下载插件

[HTTP://DataTable是.net/plug-INS/sorting]

我相信我需要这个文件:dataTables.numericComma.js但我在任何地方都找不到它,当我下载数据表时,它似乎不在zip文件中。

我也不确定是否需要使自己的自定义日期排序器传递到此插件中。

我正在尝试对此格式MM / DD / YYYY HH:MM TT(AM | PM)进行排序

谢谢

编辑

如何更改为按MM / DD / YYYY HH:MM TT(AM | PM)排序,并将其更改为美国日期?

jQuery.fn.dataTableExt.oSort['uk_date-asc']  = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a,b) {
    var ukDatea = a.split('/');
    var ukDateb = b.split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};
chobo2 asked 2020-06-30T02:03:30Z
11个解决方案
127 votes

日期排序-具有隐藏元素

将日期转换为YYYYMMDD格式,并在<td>中添加为实际值(MM / DD / YYYY),将其包装在元素中,并将样式display:none;设置为元素。 现在,日期排序将像普通排序一样工作。 同样可以应用于日期时间排序。

的HTML

<table id="data-table">
   <tr>
     <td><span>YYYYMMDD</span>MM/DD/YYYY</td>
   </tr>
</table>

的CSS

#data-table span {
    display:none; 
}
Anulal S answered 2020-06-30T02:04:25Z
104 votes

您应该使用HTML5数据属性。[https://www.datatables.net/examples/advanced_init/html5-data-attributes.html]

只需将data-order元素添加到您的td元素即可。
无需插件。

<table class="table" id="exampleTable">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Sign Up Date</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>Peter</td>
            <td data-order="2015-11-13 12:00">13. November 2015</td>
        </tr>
        <tr>
            <td>Daniel</td>
            <td data-order="2015-08-06 13:44">06. August 2015</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td data-order="2015-10-14 16:12">14. October 2015</td>
        </tr>
    </tbody>
</table>


<script>
    $(document).ready(function() {
        $('#exampleTable').DataTable();
    });
</script>
RenRen answered 2020-06-30T02:04:54Z
16 votes

单击日期(dd / mm / YYYY)下的“显示详细信息”链接,然后您可以复制并粘贴那里提供的插件代码


更新:我认为您可以像这样切换数组的顺序:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
    var usDatea = a.split('/');
    var usDateb = b.split('/');

    var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1;
    var y = (usDateb[2] + usDateb[0] + usDateb[1]) * 1;

    return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};

我要做的就是切换__date_[1](日)和__date_[0](月),并用us替换uk,这样您就不会感到困惑。 我认为应该为您解决。


更新#2:您应该只可以使用date对象进行比较。 试试这个:

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) {
 var x = new Date(a),
     y = new Date(b);
 return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
};
Mottie answered 2020-06-30T02:03:52Z
10 votes

我意识到这是一个有两年历史的问题,但我仍然发现它很有用。 我最终使用了Fudgey提供的示例代码,但使用了一个较小的mod。 节省了我一些时间,谢谢!

jQuery.fn.dataTableExt.oSort['us_date-asc']  = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? -1 : ((x > y) ?  1 : 0)); 
}; 

jQuery.fn.dataTableExt.oSort['us_date-desc'] = function(a,b) { 
  var x = new Date($(a).text()),
  y = new Date($(b).text());
  return ((x < y) ? 1 : ((x > y) ?  -1 : 0)); 
}; 
Kevin answered 2020-06-30T02:05:14Z
5 votes

截至2015年,对我而言,对DataTable中的Date列进行排序的最便捷方法是使用所需的sort插件。 由于我的日期格式为columnDefs,因此我最终使用了date-euro插件。所有需要做的是:

步骤1:包括排序插件的JavaScript文件或代码;

步骤2:添加columnDefs(如下所示)以适当的列为目标。

$('#example').dataTable( {
    columnDefs: [
       { type: 'date-euro', targets: 0 }
    ]
});
Vikram Deshmukh answered 2020-06-30T02:05:43Z
4 votes

数据表只能按DateTime以“ ISO-8601”格式排序,因此您必须将“ date-order”中的日期转换为这种格式(例如,使用Razor):

<td data-sort="@myDate.ToString("o")">@myDate.ToShortDateString() - @myDate.ToShortTimeString()</td>
Dani answered 2020-06-30T02:06:03Z
3 votes

万一有人在日期值或单元格中有空格的情况下遇到麻烦,则您将不得不处理这些位。 有时html不会提供修剪功能来处理空白区域,就像“ $ nbsp;”。 如果您不处理这些问题,则排序将无法正常进行,并且会在任何有空白的地方中断。

我也从这里的jquery扩展中获得了这段代码,并对其进行了一些更改以满足我的要求。 您应该这样做:)干杯!

function trim(str) {
    str = str.replace(/^\s+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
        if (/\S/.test(str.charAt(i))) {
            str = str.substring(0, i + 1);
            break;
        }
    }
    return str;
}

jQuery.fn.dataTableExt.oSort['uk-date-time-asc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000; // = l'an 1000 ...
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }
    var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
    return z;
};

jQuery.fn.dataTableExt.oSort['uk-date-time-desc'] = function(a, b) {
    if (trim(a) != '' && a!="&nbsp;") {
        if (a.indexOf(' ') == -1) {
            var frDatea = trim(a).split(' ');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0]) * 1;
        }
        else {
            var frDatea = trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        }
    } else {
        var x = 10000000;
    }

    if (trim(b) != '' && b!="&nbsp;") {
        if (b.indexOf(' ') == -1) {
            var frDateb = trim(b).split(' ');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0]) * 1;
        }
        else {
            var frDateb = trim(b).split(' ');
            var frTimeb = frDateb[1].split(':');
            frDateb = frDateb[0].split('/');
            var y = (frDateb[2] + frDateb[1] + frDateb[0] + frTimeb[0] + frTimeb[1] + frTimeb[2]) * 1;
        }
    } else {
        var y = 10000000;
    }

    var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
    return z;
};
Hali answered 2020-06-30T02:06:28Z
2 votes

关于update#1,有2个问题:

  • 天数= 1(d / MM / YYYY),而不是(dd / MM / YYYY)
  • 空日期

这是避免这些问题的解决方案:

jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

            //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //need to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        };

        //Sorting by Date 
        jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function (a, b) {
            var ukDatea = a.split('/');
            var ukDateb = b.split('/');

             //Date empty
             if (ukDatea[0] == "" || ukDateb[0] == "") return 1;

            //MANDATORY to change Date (d/MM/YYYY) into Date (dd/MM/YYYY) 
            if(ukDatea[0]<10) ukDatea[0] = "0" + ukDatea[0]; 
            if(ukDateb[0]<10) ukDateb[0] = "0" + ukDateb[0];

            var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
            var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

            return ((x < y) ? 1 : ((x > y) ? -1 : 0));
        };
Giu answered 2020-06-30T02:07:01Z
1 votes

跟随链接[https://datatables.net/blog/2014-12-18]

一种非常简单的按日期集成订购的方法。

<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>

在初始化数据表之前,请输入以下代码:

$(document).ready(function () {
    // ......
    $.fn.dataTable.moment('DD-MMM-YY HH:mm:ss');
    $.fn.dataTable.moment('DD.MM.YYYY HH:mm:ss');
    // And any format you need
}
Tigran answered 2020-06-30T02:07:29Z
0 votes

一整天的工作后,我得到了解决方案。 这是一个小小的解决方案,在td标签内添加了span

<td><span><%= item.StartICDate %></span></td>. 

Im使用的日期格式为dd / MM / YYYY。 在Datatables1.9.0中测试

Shanmugapriyan answered 2020-06-30T02:07:54Z
0 votes

创建一个日期为字符串的隐藏列“ dateOrder”(例如),格式为“ yyyyMMddHHmmss”,并使用属性“ orderData”指向该列。

var myTable = $("#myTable").dataTable({
 columns: [
      { data: "id" },
      { data: "date", "orderData": 4 },
      { data: "name" },
      { data: "total" },
      { data: "dateOrder", visible: false }
 ] });
Duefectu answered 2020-06-30T02:08:14Z
translate from https://stackoverflow.com:/questions/2862322/how-to-sort-by-date-with-datatables-jquery-plugin