logo标签列表

数据表格日期排序dd/mm/yyyy问题

jquerydatatablesdate-sorting
106

我正在使用一个叫做 datatables 的 Jquery 插件。

它很棒，但是我无法按照 dd/mm/yyyy 的格式正确排序日期。

我查看了他们的支持格式，但没有任何解决方法能够解决这个问题。

请问这里有人可以帮我吗？

你看过这个吗：http://www.datatables.net/release-datatables/examples/plug-ins/sorting_plugin.html - xkeshav
我已经看过了，但不太明白如何将其应用于日期。我已经用破折号替换了正斜杠，但对其余部分不确定。它说它检查一个小数位，你怎么能让它检查两个破折号？ - jaget
你没有提及加载数据的方法，所以我已经添加了一个 AJAX 解决方案。我发现我的大多数表格最初都是在浏览器中的数据，但最终都会迁移到 AJAX。 - Sablefoste
31个回答
1
在 PHP 或 JS 中，只需要传递一个数组并使用正交，例如：
$var[0][0] = "like as u wish, 30/12/2015 or something else";
$var[0][1] = strtotime($your_date_variable);

和，在数据表中...
$('#data-table-contas_pagar').dataTable({
    "columnDefs": [
        {"targets":[0],"data": [0],"render": {"_": [0],"sort": [1]}}
    ]
});
0

对我来说似乎有效的方法是：

将从数据库中使用select查询获取的完整日期时间对象推入数据集中，该数据集将以datatable格式绘制“2018-01-05 08:45:56”

然后

    $('#Table').DataTable({
        data: dataset,
        deferRender: 200,
        destroy: true,
        scrollY: false,
        scrollCollapse: true,
        scroller: true,
        "order": [[2, "desc"]],
        'columnDefs': [
            {
                'targets': 2,
                'createdCell':  function (td, cellData, rowData, row, col) {                        
                    var datestamp = new Date(cellData);
                    $(td).html(datestamp.getUTCDate() + '-' + (datestamp.getMonth()+1) + '-' + datestamp.getFullYear());
                }
            }
        ],
        "initComplete": function(settings, json) {
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();               
        }
    });

行被正确排序，然后我在行中得到了想要的HTML。

0

我发现在这种情况下最简单的排序方式是通过在JS中添加“aaSorting”选项。

例如：

$(document).ready(function() {
    $('#contacts-table').dataTable({
        "aaSorting": [0, 'desc']
});

问题在于这个例子将会像字符串一样排序第一列的条目，而不是像日期一样排序。如果源代码允许你将日期格式从dd/mm/yyyy更改为yyyy/mm/dd，“aaSorting”将会正常工作。
0

试试这个：

"aoColumns": [
        null,
        null,
        null,
        null,
        {"sType": "date"},  //  "sType": "date" TO SPECIFY SORTING IS APPLICABLE ON DATE
        null
      ]
0

如果您想对某一列进行排序，请保留 "sType": "date-uk"。 例如："data": "OrderDate", "sType": "date-uk" 在使用ajax完成Datatable脚本后，请添加以下代码。

 jQuery.extend(jQuery.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));
            }
        });

然后您将以22-10-2018的格式获得日期

你的回答有什么特别之处吗？ - tod
特别是在哪个意义上？我认为上面的评论并不是那么简短，所以我直截了当地发表了这个答案，在我的机器上测试过代码后才发布的。 - vidya
0
如果您从数据库获取日期并为每行执行for循环，并将其附加到字符串中以在JavaScript中使用以自动填充datatables，则需要像这样。请注意，使用隐藏的span技巧时，您需要考虑日期的单个数字，例如如果是第6小时，则需要在其前面添加零，否则排序中的span技巧将无法正常工作。 代码示例：
 DateTime getDate2 = Convert.ToDateTime(row["date"]);
 var hour = getDate2.Hour.ToString();
 if (hour.Length == 1)
 {
 hour = "0" + hour;
 }
 var minutes = getDate2.Minute.ToString();
 if (minutes.Length == 1)
 {
 minutes = "0" + minutes;
 }
 var year = getDate2.Year.ToString();
 var month = getDate2.Month.ToString();
 if (month.Length == 1)
 {
 month = "0" + month;
 }
 var day = getDate2.Day.ToString();
 if (day.Length == 1)
 {
 day = "0" + day;
 }
 var dateForSorting = year + month + day + hour + minutes; 
 dataFromDatabase.Append("<span style=\u0022display:none;\u0022>" + dateForSorting +
 </span>");
0

我在 REST 调用中使用了

**日期变量是：Created**

var call = $.ajax({
            url: "../_api/Web/Lists/GetByTitle('NewUser')/items?$filter=(Created%20ge%20datetime'"+FromDate+"')%20and%20(Created%20le%20datetime'"+ToDate+"' and Title eq '"+epf+"' )&$top=5000",
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

            });

  call.done(function (data,textStatus, jqXHR){
        $('#example').dataTable({
            "bDestroy": true,
            "bProcessing": true,
            "aaData": data.d.results,
            "aLengthMenu" : [
             [50,100],
             [50,100]
            ],
             dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel'
            ],

            "aoColumnDefs": [{ "bVisible": false  }],
            "aoColumns": [
                { "mData": "ID" },
                { "mData": "Title" },
                { "mData": "EmployeeName" },
                { "mData": "Department1" },
                { "mData": "ServicingAt" },
                { "mData": "TestField" }, 
                { "mData": "BranchCode" },   
                { "mData": "Created" ,"render": function (data, type, row) {
        data = moment(data).format('DD MMM YYYY');
        return data;
    }
0

使用这个代码片段！

$(document).ready(function() {
 $.fn.dataTable.moment = function ( format, locale ) {
    var types = $.fn.dataTable.ext.type;

    // Add type detection
    types.detect.unshift( function ( d ) {
        return moment( d, format, locale, true ).isValid() ?
            'moment-'+format :
            null;
    } );

    // Add sorting method - use an integer for the sorting
    types.order[ 'moment-'+format+'-pre' ] = function ( d ) {
        return moment( d, format, locale, true ).unix();
    };
};

$.fn.dataTable.moment('DD/MM/YYYY');

$('#example').DataTable();
});

Moment.js 对于所有日期和时间格式都有效，像之前一样在初始化数据表之前添加此代码片段。

还要记得加载 http://momentjs.com/。

0

我在使用Doctrine时遇到了同样的问题。我使用orderBy（'p.updatedAt'，'DESC'）从数据库正确地排序了数据，但是当DataTable处理它们时，最终结果完全不同。

我发现解决这个问题最简单的方法是在我的表中添加一个隐藏时间戳列，然后按照这一列的顺序排序日期。完整的functional example在此处。

<table>
  <thead>
    <th>Some column<th>
    <th>Visible date<th>
    <th>Timestamp<th>
  </thead>

  <tbody>
    <td>Example with Twig</td>
    <td>{{ product.updatedAt ? time_diff(product.updatedAt) : '' }}</td>
    <td>{{ product.updatedAt ? product.updatedAt.getTimestamp() : '' }}</td>
  </tbody>
</table>


$(document).ready(function() {
  let dateColumn = 1;
  let timestampColumn = 2;
  let currentColumn = timestampColumn;
  let currentDirection = "desc";

  let table = $("#dataTable").DataTable({
    "order": [
        [ timestampColumn, "desc" ],
        // If you want to keep the default order from database
        // just set "order": [] so DataTable wont define other order
    ],
    "columnDefs": [
      {
        "targets": [ timestampColumn ],
        "visible": false, // Hide the timestamp column
      },
    ]
  });

  /**
   * @var e: Events
   * @var settings: DataTable settings
   * @var ordArr: Current order used by DataTable
   *      example: [{"src":8,"col":8,"dir":"asc","index":0,"type":"string"}]
   */
  table.on("order.dt", function (e, settings, ordArr) {
    currentColumn = ordArr[0].col;
    currentDirection = ordArr[0].dir;

    if(currentColumn === dateColumn) {
      table.order([timestampColumn, currentDirection]).draw();

      // Without this line you'll get an unexpected behaviour
      table.order([dateColumn, currentDirection]); 
    }
  })
});
0

Zaheer Ahmed的解决方案对于已经格式化为英国日期的情况很有效。

我遇到了这个解决方案的问题，因为我需要处理美国格式的日期。

我通过这个微小的更改解决了这个问题：

function parseDate(a) {
    var ukDatea = a.split('/');
    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
}

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-uk-pre": function ( a ) {
        return parseDate(a);
    },

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

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

跟着你的“aoColumns”定义。

我应该在哪里调用parseDate函数？ - Burak Karakuş
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接