如何使用datatable插件按日期顺序排序(从最旧到最新) [英] How to order column by date (oldest to newest) with datatable plugin

问题描述

当我尝试使用DataTable插件对表的日期列进行排序"时，我遇到了问题.

I have an issue when I try to "order by" my date column of my table with the DataTable plugin.

我已经设置了日期格式，使其看起来像这样:星期几(全字母)，星期几(数字)，月份(数字)和年份(数字)全部用法语表示.

I have setup my date format for it to appear like this : day of the week (full letter) day of the month (number) , month (number) and year (number)all in french .

在我的代码中，我将其设置如下:

In my code I have set it like this :

setlocale(LC_ALL, 'fr_FR');

...
...
<table class="table table-hover table-responsive display" id="table_1" >
                    <thead>
                        <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Titre</th>
                            <th scope="col">Prénom</th>
                            <th scope="col">Prospect créé le </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php
            foreach($result as $key1){
                ?>
                        <tr>
                            <td scope="row"><?php echo $key1['ID']; ?></th>
                            <td><?php  echo  $key1['TITLE']; ?></td>
                            <td><?php echo  $key1['NAME']; ?></td>
                            <td><?php $date_create=$key1['DATE_CREATE']; echo strftime("%A %e %B %Y à %H h %M ", strtotime($date_create)); ?>
                            </td>
                        </tr>
                    <?php
            }
            ?>
                    </tbody>
                </table>

因此在我的表格中看起来像这样: https://i.ibb.co/KjH4ctk/Capture.png

So it appear like this in my table : https://i.ibb.co/KjH4ctk/Capture.png

但是当我尝试使用datatable插件按日期排序时，它是按星期几而不是按日期排序.

but when I try to order by date with the datatable plugin, it order by the letter of the day of the week and not really by date.

这是我的js文件:

$(document).ready(function () {
$('#table_1').DataTable({
        "destroy": true,
        language: {
            processing: "Traitement en cours...",
            search: "Rechercher :",
            lengthMenu: "Afficher _MENU_ éléments",
            info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
            infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",
            infoFiltered: "(filtré de _MAX_ éléments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun élément à afficher",
            emptyTable: "Aucune donnée disponible dans le tableau",
            paginate: {
                first: "Premier",
                previous: "Précédent",
                next: "Suivant",
                last: "Dernier"
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            }
        }
    });


});

有人知道是否有办法使其正常工作吗?

Does someone know if there's a way to make it work properly ?

此致

推荐答案

您的情况可以视为orthogonal-data

数据表正交数据

数据很复杂.表格中显示的数据不仅具有 有关每个数据点如何与中的其他数据点相对应的规则 您的表格，但每个数据点本身可以​​采用多种形式. 例如考虑货币数据；为了显示它可能会显示 排序时以货币符号和千位分隔符格式化 应该以数字形式发生，并且对数据进行搜索将接受 表格.

Data is complex. Not only will the data displayed in your tables have rules relating to how each data point corresponds to the others in your table, but also each data point itself can take multiple forms. Consider for example currency data; for display it might be shown formatted with a currency sign and thousand separators, while sorting should happen numerically and searching on the data will accept either form.

从文档中可以找到几种解决问题的方法，但是如果您的表已经存在或以HTML生成，那么最好使用HTML5数据方法.

From documentation, there are several ways to solve your problem, but if your table already exists or generated in HTML, then its better to use HTML5 data approach.

数据表HTML5数据属性

DataTables支持data- *属性，该属性可用于保存 信息在DOM中可见，但对最终用户不可见.

DataTables supports data-* attributes, which can be used to hold information visible in the DOM, but not to the end user.

现在回到您当前的代码，让我们找出我们需要更改的部分.

Now back to your current codes, lets find out which part we need to change.

仅PHP部分，让我们对此进行更改:

Only PHP part, lets change from this:

<?php
    foreach($result as $key1){
?>
        <tr>
            <td scope="row"><?php echo $key1['ID']; ?></th>
            <td><?php  echo  $key1['TITLE']; ?></td>
            <td><?php echo  $key1['NAME']; ?></td>
            <td><?php $date_create=$key1['DATE_CREATE']; echo strftime("%A %e %B %Y à %H h %M ", strtotime($date_create)); ?>
            </td>
        </tr>
<?php
    }
?>

对此:

<?php
    foreach($result as $key1){
        $date_create=$key1['DATE_CREATE'];
        $timestamp = strtotime($date_create);
        $local_datetime = strftime("%A %e %B %Y à %H h %M ", $timestamp);
?>
    <tr>
        <td scope="row"><?php echo $key1['ID']; ?></td>
        <td><?php echo $key1['TITLE']; ?></td>
        <td><?php echo $key1['NAME']; ?></td>
        <td data-order="<?php echo $timestamp; ?>"><?php echo $local_datetime; ?></td>
    </tr>
<?php
    }
?>

该实现将使Datatable根据HTML数据顺序(我们将其设置为时间戳)而不是您可以查看的最终用户字符串来对列进行排序.

The implementation will let Datatable to order your column base on HTML data-order (we set it as timestamp) instead your human view-able end user string.

希望有帮助.

这篇关于如何使用datatable插件按日期顺序排序(从最旧到最新)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！