I'm using Datatables with Django REST Framework. When the table is initiated it sorts on the correct column (order: [[0, 'asc']]), however when I click the column icon arrow, the arrow changes however no change to the data. This happens with every column. My js code is below. Anything obvious I'm doing wrong?

  <script type="text/javascript">

    var editor;
    $(document).ready(function() {

        editor = new $.fn.dataTable.Editor( {
            table: "#object-table",
            ajax: {
                create: {
                    type: 'POST',
                    url:  "{% url 'facility-list' format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                edit: {
                    type: 'PUT',
                    url:  "{% url 'facility-detail' pk=None format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                },
                remove: {
                    type: 'DELETE',
                    url:  "{% url 'facility-detail' pk=None format='datatables' %}",
                    headers: {'X-CSRFToken': '{{ csrf_token }}'}
                }
            },

            idSrc:  'facility.bldgcode',

            fields: [
                { label: "Building Code:", name: "facility.bldgcode" },
                { label: "Name:", name: "facility.name" },
                {
                    label: "Category:",
                    name: "facility.category",
                    type: "select"
                },
                {
                    label: "Location:",
                    name: "facility.location",
                    type: "select"
                }
            ],

            i18n: {
                create: {
                    button: "Add",
                    title:  "Add new facility",
                    submit: "Add"
                },
                edit: {
                    button: "Edit",
                    title:  "Edit facility details",
                    submit: "Update"
                },
                remove: {
                    button: "Delete",
                    title:  "Delete facility",
                    submit: "Delete",
                    confirm: {
                        1: "Are you sure you want to delete the selected facility?"
                    }
                }
            }

        } );

        $.fn.dataTable.Buttons.defaults.dom.button.className = 'btn btn-sm btn-primary';
        var table = $('#object-table').DataTable( {

            pageLength: 10,
            order: [[0, "asc"]],
            processing: true,
            serverSide: true,
            dom: "lBfrtip",
            ajax: "{% url 'facility-list' format='datatables' %}",
            select: 'single',

            columns: [
                { data: "facility.bldgcode", orderable: true },
                { data: "facility.name", orderable: true },
                { data: "category.name", orderable: true },
                { data: "location.name", orderable: true }
            ],

            buttons: [
                { extend: "create", editor: editor},
                { extend: "edit",   editor: editor},
                { extend: "remove", editor: editor}
            ]

        });

        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));

        editor.field('facility.category').input().addClass('form-control');
        editor.field('facility.location').input().addClass('form-control');

    });

  </script>

Thanks,
mgpearce48