Unable to display the last column in DataTable

Question

Unable to display the last column in DataTable

THE code works fine, but I'm not sure whats wrong in my code. The last column "DELETE" doesn't show. The code given below. Any help will be highly appreciated..

I'm using DataTable to display my records. The '$title' is the name of the page which is passed inside AJAX to get the required table.

HTML

<div class="container justify-content-center">
    <div class="table-responsive-md justify-content-center">
        <table id="dataTable" class="table table-striped shadow" style="width:100%">
            <thead class="bg-secondary text-white">
            <tr>
                <th>ID</th>
                <th>University</th>
                <th>Code</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

JQUERY

$(document).ready(function () {
        $title = $(".page-title").text().toLowerCase();
        $('#dataTable').DataTable({
            responsive: true,
            "autoWidth": true,
            "searching": true,
            "paging": true,
            "info": false,
            "pagingType": "full_numbers",
            "pageLength": 5,
            "lengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
            "bLengthChange": false,
            "stateSave": true,
            "bStateSave": true,
            fixedHeader: {
                header: true,
                footer: false
            },

            "processing": true,
            "serverSide": false,
            "ajax": {
                "url": "scripts/post.php",
                "type": "POST",
                "dataType": "json",
                "dataSrc": "data",
                "data": {
                    table: "tbl_" + $title
                }
            },
            "rowId": "pk_int_" + $title + "ID",
            "columns": [
                {"data": "pk_int_" + $title + "ID"},
                {"data": "txt_" + $title + "Name"},
                {"data": "txt_" + $title + "Code"},
                {
                    "data": null,
                    "visible": true,
                    "defaultContent": '<a href="" value="update"  class="btnActionUpdate" data-toggle="modal" data-target="#modalCenter" data-whatever="@update"><i  class="far fa-edit"></i></a>',
                    "targets": -1
                },
                {
                    "data": null,
                    "visible": true,
                    "defaultContent": '<a href="" value="delete"  class="btnAction" data-toggle="modal" data-target="#modalCenter" data-whatever="@delete"><i  class="far fa-trash-alt text-danger"></i></a>',
                    "targets": -1
                }
            ],
            columnDefs: [
                {"title": "University Name", "targets": 1},
                // {targets: [0, 1, 2, 3, 4], visible: true},
                {targets: '_all', visible: true},
                {
                    "targets": 0,
                    "title": "ID",
                    "className": "text-left",
                    "width": "5%"
                },
                {
                    "targets": 1,
                    "className": "text-left",
                    "width": "50%"
                },
                {
                    "targets": 2,
                    "className": "text-left",
                    "width": "25%"
                },
                {
                    "targets": [3, 4],
                    "className": "text-center",
                    "width": "10%",
                    "visible": true,
                    "bSortable": false
                }
            ],
            language: {
                paginate: {
                    next: '<i class="fas fa-angle-right"></i>',
                    previous: '<i class="fas fa-angle-left"></i>',
                    first: '<i class="fas fa-angle-double-left"></i>',
                    last: '<i class="fas fa-angle-double-right"></i>'
                }
            }
        });
    });

JSON

{
    "recordsTotal": 5,
    "data": [{
        "pk_int_universityID": "1",
        "txt_universityName": "Not Available",
        "txt_universityCode": "NA"
    }, {
        "pk_int_universityID": "2",
        "txt_universityName": "Others",
        "txt_universityCode": "Others"
    }, {
        "pk_int_universityID": "3",
        "txt_universityName": "Sultan Qaboos University",
        "txt_universityCode": "SQU"
    }, {
        "pk_int_universityID": "4",
        "txt_universityName": "Oman Medical College",
        "txt_universityCode": "OMC"
    }, {
        "pk_int_universityID": "5",
        "txt_universityName": "Arabian Gulf University",
        "txt_universityCode": "AGU"
    }]
}

OUTPUT

Answer 1

Datatables Version 1.11.50

I'm late to the party here but have found on a complex Datatables set up there is the following option:

$('#tableId').DataTable({
        ...
        options
        ...
        {
            "targets": [0, 1, -1],
            "className": "noVis"
        },
        ...
});

With the -1 permanently hiding the final column of the table.