Question

我有一个“可用性”列，其日期格式为dd-mm-yyyy。

当我按升序和降序排序时，它只适用于Firefox。在其他浏览器特别是IE它不起作用。但是，如果我使用日期格式yyyy-mm-dd，那么它无处不在。

所以，我环顾四周，找到了一个解决方案，创建一个日期格式为yyyy-mm-dd的隐藏列，并将我的升序和降序指向该隐藏列。

不幸的是，作为data-tables和jQuery的新手，我正在努力解决这个问题。为了使问题更加困难，我有一个带有25个过滤器的巨大过滤器，它们正在处理隐藏的列。

这是我的表头：

<thead>
<tr>
    <th width="15%">Username</th>   
    <th style="display:none;">Primary modules</th>
    <th style="display:none;">Primary modules</th>
    <th style="display:none;">Primary modules</th>
    <th style="display:none;">Primary modules</th>
    <th style="display:none;">Primary modules</th>
    <th style="display:none;">Secondary modules</th>
    <th style="display:none;">Secondary modules</th>
    <th style="display:none;">Secondary modules</th>
    <th style="display:none;">Secondary modules</th>
    <th style="display:none;">Secondary modules</th>
    <th width="20%">Primary Role</th>
    <th width="20%">Secondary Role</th>
    <th width="20%">Location</th>
    <th style="display:none;">Experience</th>                        
    <th width="2%"><?php echo get_currencysymbol($currencyid) ?></th>
    <th width="2%">Rate Type</th>
    <th width="7%">Availability</th>
    <th style="display:none;">sortable date</th>
    <th width="14%">Languages</th>
    <th style="display:none;">Languages</th>
    <th style="display:none;">Languages</th>
    <th style="display:none;">Nationality</th>
    <th style="display:none;">Nationality</th>
    <th style="display:none;">Nationality</th>
    <th style="display:none;">Nationality</th>
    <th style="display:none;">Nationality</th>                        
</tr>
</thead>

这是我的jquery

$('#dt3').dataTable()
    .columnFilter({aoColumns: [
        {sSelector: "#username"},
        {sSelector: "#pmodules", type: "text", bSmart: true},
        {sSelector: "#pmodules2", type: "text", bSmart: true},
        {sSelector: "#pmodules3", type: "text", bSmart: true},
        {sSelector: "#pmodules4", type: "text", bSmart: true},
        {sSelector: "#pmodules5", type: "text", bSmart: true},
        {sSelector: "#smodules", type: "text", bSmart: true},
        {sSelector: "#smodules2", type: "text", bSmart: true},
        {sSelector: "#smodules3", type: "text", bSmart: true},
        {sSelector: "#smodules4", type: "text", bSmart: true},
        {sSelector: "#smodules5", type: "text", bSmart: true},
        {sSelector: "#primaryrole", type: "select", values: [<?php echo addSingleQuotes($jobtitiles); ?>]},
        {sSelector: "#secondaryrole", type: "select", values: [<?php echo addSingleQuotes($jobtitiles); ?>]},
        {sSelector: "#location"}, /*LOCATION PART OF THE DISPLAY TABLE BUT NOT PART OF THE SEARCH CRITERIA */
        {sSelector: "#experience", type: "number-range"},
        {sSelector: "#rate", type: "number-range"},
        {sSelector: "#ratetype", type: "select", values: [<?php echo addSingleQuotes($ratetypes); ?>]},
        {sSelector: "#availability", type: "date-range", sType: "uk_date" },
        {},
        {sSelector: "#languages", type: "select", values: [<?php echo addSingleQuotes($languages); ?>]},
        {sSelector: "#languages1", type: "select", values: [<?php echo addSingleQuotes($languages); ?>]},
        {sSelector: "#languages2", type: "select", values: [<?php echo addSingleQuotes($languages); ?>]},
        {sSelector: "#nationality", type: "text", bSmart: true},
        {sSelector: "#nationality1", type: "text", bSmart: true},
        {sSelector: "#nationality2", type: "text", bSmart: true},
        {sSelector: "#nationality3", type: "text", bSmart: true},
        {sSelector: "#nationality4", type: "text", bSmart: true},
    ]}
);

如何指出我的可用性对隐藏列sortable date进行排序？

Answer 1

我相信您可以使用iDataSort选项。

$('#dt3').dataTable( {
    "aoColumnDefs": [
      { "iDataSort": 1} // your display date
      { "bVisible": false }, // your behind the scenes date value to sort by
    ]
  });

对不起，我目前没有自己的代码可访问，但我相信在创建列时，您可以在另一个（隐藏）列上指定索引以进行排序。我用这个来分类美国和英国的日期。

Answer 2

在dataTable调用上方添加：

$.extend($.fn.dataTableExt.oSort, {
    "date-uk-pre": function (a) {
        var ukDatea = a.split('/');
        return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    },

        "date-uk-asc": function (a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

        "date-uk-desc": function (a, b) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

将此添加到需要英国格式排序的aoColumns：{ "sType": "date-uk" }

Answer 3

你好以下方式工作过。您是否希望在jquery datatable插件中订购date类型的字段：

// Function to convert the date to be able to order
 jQuery.extend( jQuery.fn.dataTableExt.oSort, {
                    "date-uk-pre": function ( a ) {
                        var ukDatea = a.split('/');
                      console.log(ukDatea);  
                      return (ukDatea[2] + ukDatea[1] + ukDatea[0]*1);
                    },

                    "date-uk-asc": function ( a, b ) {
                        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
                    },

                    "date-uk-desc": function ( a, b ) {
                        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
                    }
                } );



      // ordering the table by table field
      $('#table_id').dataTable({
           "order": [[ 0, "desc" ]] // 0 = date of position in your table
      });

在IE和Chrome中使用dd-mm-yyyy格式对日期进行排序

3 个答案: