I'm using Datatable and turn on odering for datatable but it not working, when I click the icon arrow of header, the arrow changes however no change to the data. This happen with every column. This is my js and html code below.

var data = {
        'parenId': billId,
        'keyword': "",
        'skipCount': 0,
        'maxResultCount': 10
    }
    var dataTable = $('#CarRentalTable').DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: true,
        searching: false,
        autoWidth: true,
        fixedColumns: true,
        fixedHeader: true,
        bLengthChange: false,
        scrollCollapse: true,
        ordering: true,
        ajax: abp.libs.datatables.createAjax(qLCTX.services.carRental.carRentalOfBill, function () {
            return data;
        }),
        columnDefs: [
            {
                title: l("Order"),
                render: function (data, type, full, meta) {
                    var table = $('#CarRentalTable').DataTable();
                    var info = table.page.info();
                    return info.page * table.page.len() + meta.row + 1;
                },
                className: "text_center",
                width: "5%"
            },
            {
                title: l("CarRentalCustomer"), data: "customer", width: "15%"
            },
            {
                title: l("CarRentalCar"), data: "carName", width: "15%"
            },
            {
                title: l("BeginDate"), data: "beginDate", width: "13%",
                render: function (beginDate) {
                    return moment(beginDate).format('DD/MM/YYYY');
                }
            },
            {
                title: l("EndDate"), data: "endDate", width: "13%",
                render: function (endDate) {
                    return moment(endDate).format('DD/MM/YYYY');
                }
            },
            {
                title: l("RealDate"), data: "realDate", width: "13%",
                render: function (realDate) {
                    return moment(realDate).format('DD/MM/YYYY');
                }
            },
            {
                title: l("CarRentalCost"), data: "cost", width: "8%",
            },
            {
                title: l("CarRentalStars"), data: "stars", width: "10%",
                render: function (data) {
                    var htmlRender = '<div class="car__evaluate">';
                    for (var i = 1; i <= 5; i++) {
                        if (i <= data)
                            htmlRender += '<i class="fas fa-star"></i>';
                        else
                            htmlRender += '<i class="far fa-star"></i>';
                    }
                    htmlRender += '</div>';
                    return htmlRender;
                }
            },

            {
                orderable: false,
                className: "action_table",
                data: "id", render: function (data) {
                    var htmlRender = '';
                    htmlRender += '<button title="Edit" class="btn-action btn-edit" type="button" _type="edit" _id="'
                        + data + '"><i class="fa fa-pencil-square-o"></i></button>';
                    
                    htmlRender += '<button title="Delete" class="btn-action btn-delete" type="button" _id="'
                        + data + '"><i class="fa fa-trash-o"></i> </button>';
                    //}
                    return htmlRender;
                },
                width: "8%"
            }

        ],
        
        "fnDrawCallback": function (oSettings) {
            if ($('#CarRentalTable').DataTable().page.info().pages < 2) {
                $('.dataTable_footer').hide();
            } else {
                $('.dataTable_footer').show();
            }
        }
    }));