DataTable sorting via server side rendering

Question

I want to sort my datatable via server side. When i click the column i want to sort, then i arrive in backend with the requested parameters, sort my result and return them to client. But in javascript the datatable does not refresh the sorting data.

The default sorting is by first table column ascending. Which you can see at the end of javascript code.

In javascript code you can see the ajax area. In this area arrive, when i click on each column of the table i want to sort. But the data don't refresh, it only shows the processing label. In the developer area of browser, i get the correct sorting data.

Here my javascript code:

    workListTable = $('#worklist-table').DataTable({
                searching: false,
                paging: false,
                info: false,
                processing: true,
                serverSide: true,
                ordering: true,
                scrollX: true,
                scrollY: "55vh",
                ajax: 
                {
                    url: "search.do",
                    type: "POST",
                    data: function(d)
                    {
                        d.todo = "loadListData";
                        var filterArray = [];

                        filterArray.push({machineGroup: machineId});
                        filterArray.push({itemNumber: itemNumber.val()});
                        filterArray.push({projectNumber: projectNumber.val()});
                        filterArray.push({sbaFrom: sbaFrom.val()});
                        filterArray.push({sbaTo: sbaTo.val()});
                        filterArray.push({userId: userId.val()});

                        var orderBy = "asc";
                        var orderColumnName = "";
                        for (var i = 0; i < d.columns.length; i++)
                        {
                            for (var j = 0; j < d.order.length; j++)
                            {
                                var orderColumn = d.order[j].column;
                                if (i == orderColumn)
                                {
                                    orderColumnName = d.columns[i].name;
                                    orderBy = d.order[j].dir;
                                    break;
                                }
                            }
                        }

                        var orderByObject = 
                        {
                            orderColumn: orderColumnName,
                            orderColumnBy: orderBy
                        };

                        return $.extend({}, d, {
                            "filter": filterArray,
                            "order": orderByObject
                        });
                    },
                },
                columns: [/*print column data*/],
initComplete: function( settings, json )
                {
                    $(buttonSearch).removeClass('disabled');
                },
                order: [[0, "desc"]]

And the javacode:

 @PostMapping("/search.do")
    public ResponseEntity<Object> search()
    {
        ResponseEntity<Object> response = new ResponseEntity<Object>(null, HttpStatus.NOT_FOUND);
        try
        {
            // get the filter parameter
            final WorkListModel model = getFilterParameters(getRequest().getParameterMap());
            List<WorkList> list = workListService.getWorkList(model);
            if (!CollectionUtils.isNullOrEmpty(list))
                list = sortList(list, getRequest().getParameterMap());

            final WorkListDataObject dataTableObject = new WorkListDataObject();
            dataTableObject.setData(list);
            dataTableObject.setDraw(1);
            dataTableObject.setRecordsFiltered(list.size());
            dataTableObject.setRecordsTotal(list.size());

            response = new ResponseEntity<Object>(dataTableObject, HttpStatus.OK);
        }
        catch (Exception e)
        {
            LOG.error("WorkListController.search(): Error while worklist lines.", e);
            response = new ResponseEntity<Object>(message, HttpStatus.INTERNAL_SERVER_ERROR);
        }
        return response;
    }

Marcel Weidner Marcel Weidner · Accepted Answer · 2019-09-12T09:48:41

I have found the problem, the problem is in java code. I set always the draw value to 1. I must use the draw value from request. After that the datatable refreshed.

DataTable sorting via server side rendering

1 Answers