Sorting the table by groups using DataTable

February 14, 2022

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel
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" 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>

>Solution :

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" 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>