Sorting the table by groups using DataTable-CodePudding

I have a table as shown below. Sorting works fine, only I need "section" to be shown in order:

In evidence
On the front page
In archive

I am new, just learning to use 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"  width="90%">
        <thead>
            <tr>
                <th >Id</th>
                <th >Title</th>
                <th >Brand</th>
                <th >Section</th>
                <th >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>

CodePudding user response：

First, there is no need to manually add rows to the table. DataTable does it automatically via columns.data and data combo then use columns.render to control the sorting or ordering of a column. Try this

<!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"  width="90%">
        <thead>
            <tr>
                <th >Id</th>
                <th >Title</th>
                <th >Brand</th>
                <th >Section</th>
                <th >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>

Method 2: Adding the data manually as requested by 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"  width="90%">
        <thead>
            <tr>
                <th >Id</th>
                <th >Title</th>
                <th >Brand</th>
                <th >Section</th>
                <th >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>