How to Create a DataTable with Sequential Display IDs in Ascending Order

In this blog post, you can discuss the need for displaying data with sequential IDs in ascending order, such as in scenarios where you want to maintain a clean and organized data presentation. The blog can then provide a step-by-step guide on how to achieve this using DataTables in web development, with a focus on the JavaScript code modifications required. You can include code examples and explanations to make it easy for readers to implement this feature in their own projects.

Html Part:-

<div class="card mt-2">
                                        <div class="card-body shadow ">

                                            <!-- Table for showing data start -->
                                            <table id="organisation_data_Table" class="table" data-order='[[ 0, "asc" ]]'>
                                                <thead>

                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                            <!-- Table for showing data end -->
                                        </div>
                                    </div>

Javascript Code:-

 $(document).ready(function() {
        // image load
        window.addEventListener("load", function() {
            $(".loader").delay(500).fadeOut("slow");
        });
        var slug_id = $('#org_user_id').val();


        var dt = $('#organisation_data_Table').DataTable({
            "ajax": {
                "paging": true,
                "scrollX": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "processing": true,
                "serverSide": true,
                "url": "{{url('api/v1/j/organization/index')}}/" + slug_id,
                "dataSrc": 'data',
                "type": "GET",
                "datatype": "json",
                "crossDomain": true,
                "beforeSend": function(xhr) {
                    xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem(
                        'a_u_a_b_t'));
                }
            },
            processing: true,
            language: {
                processing: "<img src='../../assets/images/loader.gif' style='z-index:1071;background-color:white;border-radius:8pt;padding-top:4pt;padding-bottom:4pt;position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;'>"
            },
            rowReorder: {
                selector: 'td:nth-child(2)'
            },
            responsive: true,
            rowReorder: false,
            columnDefs: [{
                    "title": "ID",
                    "targets": 0,
                    "width": "5%"
                },
                {
                    "title": "Organization Name",
                    "targets": 1,
                    "width": "30%"
                },
                {
                    "title": "Dashboard Access",
                    "targets": 2,
                    "width": "30%"
                },

                {
                    "title": "Action",
                    "targets": 1,
                    "width": "25%"
                },
            ],
            columns: [{
                    
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + 1; 
                    },
                },
                {
                    data: 'org_name'
                },

                // {
                // data: null,
                // render: function(data, type, row)   
                // {
                //     return '<div class="row"><div class="col-2"><button type="button"  id="' +
                //             data['org_slug'] +
                //             '" class="onslugbutton btn btn-primary"><i class="mdi mdi-lead-pencil"></i>Continue to dashbaord </button></div> </div>'

                // },
                // },
                {
                    data: null,
                    render: function(data, type, row) {
                        return '<a href="orgs/' + data['org_slug'] + '/dashboard' + ' " class="btn waves-effect waves-light btn-xs btn-info">Continue Dashboard </a>'

                    },
                },
                {
                    data: null,
                    render: function(data, type, row) {
                        return '<div class="row"><div class="col-2"><button type="button"  id="' +
                            data['id'] +
                            '" class="edit btn btn-primary"><i class="mdi mdi-lead-pencil"></i></button></div><div class="col-2"><button type="button" id="' +
                            data['id'] +
                            '"  class="btn btn-danger delete"><i class="mdi mdi-delete"></i></button></div> </div>'
                    },
                },
            ],
        });

Add 1 to meta.row (which starts from 0) for the display ID

 data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + 1; 

I hope this will help you….!!!!