DataTable：日期仅按第一个数字排序（基于dd）

Question

我在排序日期时遇到问题；我注意到日期仅根据第一个数字排序（因此仅根据 dd），您可以验证。

日期格式必须是dd/MM/yyyy。所以日期 11/02/2022 应该早于日期 04/12/2021 但这并没有发生。

你能帮帮我吗？

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="//cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
</head>
<body>

<table id="my-table" class="row-border hover" width="90%">
        <thead>
            <tr>
                <th class="th-sm">Id</th>
                <th class="th-sm">Title</th>
                <th class="th-sm">Brand</th>
                <th class="th-sm">Section</th>
                <th class="th-sm">Date</th>
                
            </tr>
        </thead>
    </table>
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="//cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#my-table").DataTable();
        });
        
        var allart = [{
    title: '2019 Indian FTR 1200 Motorcycle Review', 
    date: '27/11/2021 ', 
    brand:' Guzzi ', 
    section:' In evidence ', 
    id:' 123456 '}, {
    title: "2022 Honda Ruckus Buying Guide", 
    date: '04/12/2021 ', 
    brand:' Honda ', 
    section:' In archive ', 
    id:' 135623 '}, {
    title: "Chaleco López inaugurates' his' museum", 
    date: '22/01/2022 ', 
    brand:' Chaleco ', 
    section:' On the front page ', 
    id:' 256346 '
    }, {
    title: "5 Motorcycles You Don't Have to Shift", 
    date: '11/02/2022 ', 
    brand:' Various ', 
    section:' On the front page', 
    id:' 752372 '
    },{
    title: "2020 Harley-Davidson LiveWire New Electric Motorcycle Review", 
    date: '20/01/2022 ', 
    brand:' Harley-Davidson  ', 
    section:' In archive ', 
    id:' 745672 '
    }, {
    title: "2019 Kawasaki Z400 Review", 
    date: '02/02/2022 ', 
    brand:' Kawasaki  ', 
    section:' In evidence ', 
    id:' 763452 '
    }];

let table = document.getElementById("my-table");
var tbdy = document.createElement('tbody');
                allart.forEach(function (item) {               
                    let child = document.createElement("tr");
                    child.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.title}</a></td>
                    <td>${item.brand}</td>
                    <td>${item.section}</td>
                    <td>${item.date}</td>
                    `;
                    tbdy.appendChild(child);
                })
                table.appendChild(tbdy);
    </script>
</body>
</html>

Answer 1

您的日期格式无效，因此 DataTable 将它们视为字符串。对于 DataTable 将它们排序为日期，您需要将它们转换为日期对象。试试这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="//cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css" />
</head>
<body>
    <table id="my-table" class="row-border hover" width="90%">
        <thead>
            <tr>
                <th class="th-sm">Id</th>
                <th class="th-sm">Title</th>
                <th class="th-sm">Brand</th>
                <th class="th-sm">Section</th>
                <th class="th-sm">Date</th>
            </tr>
        </thead>
    </table>
    
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="//cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script>
        var allart = [
            {
                title: '2019 Indian FTR 1200 Motorcycle Review', 
                date: '27/11/2021 ', 
                brand:' Guzzi ', 
                section:' In evidence ', 
                id:' 123456 '
            },
            {
                title: "2022 Honda Ruckus Buying Guide", 
                date: '04/12/2021 ', 
                brand:' Honda ', 
                section:' In archive ', 
                id:' 135623 '
            },
            {
                title: "Chaleco López inaugurates' his' museum", 
                date: '22/01/2022 ', 
                brand:' Chaleco ', 
                section:' On the front page ', 
                id:' 256346 '
            },
            {
                title: "5 Motorcycles You Don't Have to Shift", 
                date: '11/02/2022 ', 
                brand:' Various ', 
                section:' On the front page', 
                id:' 752372 '
            },{
                title: "2020 Harley-Davidson LiveWire New Electric Motorcycle Review", 
                date: '20/01/2022 ', 
                brand:' Harley-Davidson  ', 
                section:' In archive ', 
                id:' 745672 '
            },
            {
                title: "2019 Kawasaki Z400 Review", 
                date: '02/02/2022 ', 
                brand:' Kawasaki  ', 
                section:' In evidence ', 
                id:' 763452 '
            }
        ];

        $(document).ready(function() {
            let table = document.getElementById("my-table");
            var tbdy = document.createElement('tbody');
            allart.forEach(function (item) {               
                let child = document.createElement("tr");
                child.innerHTML = `
                <td>${item.id}</td>
                <td>${item.title}</a></td>
                <td>${item.brand}</td>
                <td>${item.section}</td>
                <td>${item.date}</td>
                `;
                tbdy.appendChild(child);
            })
            table.appendChild(tbdy);

            $("#my-table").DataTable({
                columnDefs: [{
                    targets: 3,
                    "render": function ( data, type, row, meta ) {
                        if( type == 'sort' || type == 'type' ){
                            switch(data.trim().toLowerCase()){
                                case 'in evidence': return 0;
                                case 'on the front page': return 1;
                                case 'in archive': return 2;
                                default: return data;
                            }
                        }

                        return data;
                    }
                },{
                    targets: 4,
                    "render": function ( data, type, row, meta ) {
                        if( type == 'sort' || type == 'type' ){
                            let date = data.trim().split('/');

                            if( data.length > 0 ){
                                return new Date(date[1]+'/'+date[0]+'/'+date[2]).getTime();
                            }
                        }

                        return data;
                    }
                }],
                order: [[3, 'asc']]
            });
        });
    </script>
</body>
</html>

Answer 2

如果你不介意就地修改数据（而不是创建一个新数组），并且你对 ES6 没意见（你使用 let 暗示你是），这对 Array.sort.您必须对日期进行一些修改，但这不必显示在您的页面上。你可以这样试试

allart.sort((firstObj, secondObj) => {
  // this gives you an array with [year, month, day]
  const firstArr = firstObj.date.split('/').reverse()
  const secondArr = secondObj.date.split('/').reverse()
  // the date object month is 0-indexed, so we're subtracting 1 from the month
  firstArr[1] -= 1
  secondArr[1] -= 1
  firstDate = new Date(firstArr[0], firstArr[1], firstArr[2])
  secondDate = new Date(secondArr[0], secondArr[1], secondArr[2])
  // now to the actual sort logic! Since you indicated newest to oldest, we'll do 
  return secondDate - firstDate
})
  //then you can do your forEach function, etcetera

DataTable：日期仅按第一个数字排序（基于dd）

DataTable: the date is sorted only by the first number (based on dd)

javascript

datatables