javascript - 通过服务器端渲染对 DataTable 进行排序

Question

我想通过服务器端对数据表进行排序。 当我单击要排序的列时，我会带着请求的参数到达后端，对结果进行排序并将它们返回给客户端。但在 javascript 中，数据表不会刷新排序数据。

默认排序是按第一个表列升序。您可以在 javascript 代码末尾看到。

在 javascript 代码中您可以看到 ajax 区域。在到达这个区域时，当我单击要排序的表格的每一列时。但数据不刷新，只显示处理标签。 在浏览器的开发者区域中，我得到了正确的排序数据。

这是我的 JavaScript 代码:

    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"]]

和java代码:

 @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;
    }

Answer 1

我已经找到问题了，问题出在java代码上。我始终将绘制值设置为 1。 我必须使用请求中的绘制值。之后数据表刷新。