Orderinng/Orderable is not working

Orderinng/Orderable is not working

huypro020801huypro020801 Posts: 1Questions: 1Answers: 0

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();
            }
        }
    }));

Answers

  • colincolin Posts: 14,610Questions: 1Answers: 2,493

    You've enable serverSide, so the server-side script needs to deal with the ordering (and paging and filtering). If you're not expecting over 10k records, that probably won't be needed,

    Colin

Sign In or Register to comment.