使用 DataTable 按组对 table 进行排序

Question

我有一个 table，如下所示。排序工作正常，只是我需要按顺序显示“部分”：

证据
首页
存档中

我是新手，刚刚学习使用dataTable，jQuery。

<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

首先，无需手动向 table 添加行。 DataTable 通过 columns.data and data combo then use columns.render 自动控制列的排序或顺序。试试这个

<!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() {
            $("#my-table").DataTable({
                columns: [
                    {data: 'id'},
                    {data: 'title'},
                    {data: 'brand'},
                    {
                        data: 'section',
                        "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;
                        }
                    },
                    {data: 'date'}
                ],
                data: allart,
                order: [[3, 'asc']]
            });
        });
    </script>
</body>
</html>

方法二：按照OP的要求手动添加数据

<!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;
                    }
                }],
                order: [[3, 'asc']]
            });
        });
    </script>
</body>
</html>

使用 DataTable 按组对 table 进行排序

Sorting the table by groups using DataTable

javascript

ajax

jquery

datatables