How to order columns?

martihor

I have table defined like that in html:

{% block content %}
 <!--   <div class="col-sm-12"> -->
    <div id="report-view">
        <h2 class="card page-title">
            {{title}}
        </h2>
        <ul class="export-buttons card">
            <li class="glyphicon-filetype"><a id="filtered-excel-export" href="/r/{{ report.name }}/export/xlsx/" title="Export to Excel" target="_blank">&#xE070;</a></li>
            <li class="glyphicon-filetype"><a class="excel-export" href="/r/{{ report.name }}/export/xlsx/" title="Export to Excel" target="_blank">&#xE070;</a></li>
            <li class="glyphicon-filetype"><a href="/r/{{ report.name }}/export/csv/" title="Export to CSV" target="_blank">&#xE012;</a></li>
        </ul>
        <table id="orderpipelineerep" class="table table-striped table-bordered" style="width:100%">
            <thead>
            <tr>
                <th> </th>
                <th>Order ID</th>
                <th>Item ID</th>
                <th>Material</th>
            </tr>
            </thead>
        </table>
    </div>
{% endblock content %}

{% block scripts_insert %}
<script src="{% static 'ifp/js/pagination.listbox.js' %}?{% svn_revision_number %}"></script>
<script src="{% static 'ifp/js/script_dte.js' %}?{% svn_revision_number %}"></script>
{% endblock %}

---

In JS:

$(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRFToken': $.cookie('csrftoken')
        }
    });
    var editor = new $.fn.dataTable.Editor({
        ajax: {
            url: "/api/pipeline_dte/editor/?format=datatables",
            error: function(xhr, error, thrown) {
                const json = $.parseJSON(xhr.responseText);
                swal(json.Message, json.ExceptionMessage, "error");
            },
        },
        table: "#orderpipelineerep",
        fields: [
            {
                label: "order_id:",
                name: "order_id",
                type: "readonly",
                attr: {
                    disabled: true
                }
            },
            {
                label: "item_id:",
                name: "item_id",
            },
            {
                label: "Material:",
                name: "refmat.id",
                type: "select"
            }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            },
        }
    });

    make_table_column_searchable($('#orderpipelineerep'));

    var table = $('#orderpipelineerep').DataTable({
        "pageLength": 25,
        "lenghtMenu": [ 10, 25, 50, 75, 100 ],
        fixedColumns: {
                leftColumns: 1
            },
        scrollX: true,
        "serverSide": true,
        dom: "BfpiltBfpil",
        "ajax": "/api/pipeline_dte/?format=datatables",
        "columns": [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {"data": "order_id" },
            {"data": "item_id" },
            {"data": "refmat.id"}
        ],
        order: [ 1, 'asc', 2, 'asc' ],
        autoFill: {
            columns: ':not(:first-child)',
            editor:  editor
        },
        keys: {
            columns: ':not(:first-child)',
            editor: editor,
            editorKeys: 'navigation-only',
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child',
            blurable: true
        },
        buttons: [
            // {extend: "create", editor: editor},
            {extend: "edit", editor: editor},
            {extend: "remove", editor: editor}
        ]
    });

---

In view.py I have:

class OrderPipelineErepViewSet(DatatablesEditorModelViewSet):
    queryset = OrderPipelineErep.objects.all().order_by('id')
    # order_id, item_id
    serializer_class = serializers.OrderPipelineErepSerializer

    def get_options(self):
        return get_OrderPipelineErep_options()

    class Meta:
        datatables_extra_json = ('get_options', )

When I change this order_by('id') to order_by(item_id)

the ordering of the table is changed to order by item ID rather than by order ID.
But I do not know how to do it by clicking on the arrow in the table.

Can anybody help?
Thank you.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I guess the first thing to ask is, do you need server-side processing? Do you have tens of thousands or more records? If you don't, then just use client-side processing.

For server-side processing, the data sent to the server is documented here.

Allan