Column Sorting/Ordering Not Working

mgpearce48

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

kthorngren

You have Server Side Processing (serverSide: true,) enabled. This expects the server script (Django) to perform the sorting, search and paging of the table using the protocol described here. Turning off server side processing will allow the client to perform these functions. With server side processing on the only data in the client is the page being displayed. With it off all the data is in the client.

Do you need server side processing? See this FAQ to help decide.

Kevin

mgpearce48

OK understood, thanks Kevin. I'll have to think about this a bit more but it appears server side processing may not be necessary as the total number of records is only a couple of hundred.
Thanks,
mgpearce48

kthorngren

If your Django script is not setup for Server Side Processing then all the rows are being returned now so no performance gain from SSP. Might as well turn it off and let the client side Datatables do all the work. Especially with only 200 rows

Kevin