如何使用数据表插件按日期（从最旧到最新）排序列

Posted 2023-05-07

【中文标题】如何使用数据表插件按日期（从最旧到最新）排序列

【英文标题】：How to order column by date (oldest to newest) with datatable plugin

【发布时间】：2019-09-25 03:48:19

【问题描述】：

当我尝试使用 DataTable 插件对表格的日期列“排序”时遇到问题。

我已经设置了我的日期格式，让它看起来像这样：星期几（全字母）月份中的一天（数字），月份（数字）和年份（数字）都是法语。

在我的代码中我这样设置：

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

但是当我尝试使用数据表插件按日期排序时，它按星期几的字母排序，而不是真正按日期排序。

这是我的 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"
            
        
    );


);

有人知道是否有办法让它正常工作吗？

问候，

【问题讨论】：

我对 PHP 了解不多，但请看这个：How to sort by Date with DataTables jquery plugin? 和这个PHP ISO-8601 Format

【参考方案1】：

您的案例可以视为orthogonal-data

Datatables Orthogonal Data

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

从文档来看，有几种方法可以解决您的问题，但如果您的表格已经存在或以 html 格式生成，那么最好使用 HTML5 数据方法。

Datatables HTML5 Data Atrributes

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

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

只有 PHP 部分，让我们改变一下：

<?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 数据顺序（我们将其设置为时间戳）而不是您的人类可查看的最终用户字符串对您的列进行排序。

希望有所帮助。