Javascript 在服务器上而不是在客户端对主干分页器结果进行排序

我用于在列可排序的表中显示数据。但是，当单击列的任何标题时，排序是在客户端完成的，而不是执行新的服务器请求，该请求应包含用于对结果进行排序的属性（例如名称）

基类

module.exports = Backbone.PageableCollection.extend({
    initialize: function (items, options) {
        options || (options = {});
        this.url = options.url || "/";
    },
    state: {
        pageSize: 15,
        firstPage: 0,
        currentPage: 0
    },
    queryParams: {
        sortKey: 'sort',
        pageSize: 'size',
        currentPage: 'page'
    },

parseState: function (resp) {
    return {totalRecords: resp && resp.length > 0 ? resp[0]['total_entries'] : 0};
},
parseRecords: function (resp) {
    return resp && resp.length > 0 ? resp[1] : [];
},

model: Backbone.NestedModel

});

示例实例化

collections.myTasks = new collections.PagingCollection([], {
    model: models.SyncModel.extend({
          url: URLs.TASKS
    }),
    url: URLs.MY_TASKS,
    state: {
         pageSize: 30,
         firstPage: 0,
         currentPage: 0,
    }
});

纵队

columns: [
    {
        name: "dueDate",
        label: "Due Date",
        cell: "date",
        filterCell: FilterCell,
        editable: false,
        width: "80px"
    },
    {
        name: "reminder",
        label: "Reminder",
        filterCell: FilterCell,
        cell: Backgrid.StringCell.extend({
            formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
                fromRaw: function (rawValue, model) {
                    return DateHelper.format(
                        IntervalHelper.calculateBefore(model.attributes['dueDate'], rawValue)
                    );
                }
            })
        }),
        editable: false,
        width: "80px"
    },
    {
        name: "name",
        label: "Subject",
        cell: "string",
        filterCell: FilterCell,
        editable: false,
        width: "auto"
    },
    {
        name: "taskStatusCtlg.taskStatus",
        label: "State",
        filterCell: SelectFilterCell.extend({
            filterField: 'taskStatus',
            addAllOption: true
        }),
        cell: "string",
        width: "75px"
    },
    {
        name: "assignedTo.alfrescoUserName",
        label: "Assigned To",
        cell: "string",
        filterCell: SelectFilterCell.extend({
            filterField: 'assignee',
            addAllOption: true
        }),
        editable: false,
        width: "120px"
    },
    {
        name: "taskTypeCtlg.taskType",
        label: "Type",
        cell: "string",
        filterCell: SelectFilterCell.extend({
            filterField: 'taskType',
            addAllOption: true
        }),
        editable: false,
        width: "70px"
    },
    {
        name: "mainDocument.name",
        label: "Case / Document",
        link: "mainDocument.id",
        cell: LinkCell,
        filterCell: FilterCell,
        editable: false,
        width: '160px'
    }
],

获取数据等操作没有问题。但是当点击插入符号时，排序是在客户端完成的。但我需要在单击列标题（在服务器上排序）时将属性“sort”和“order”附加到请求URL

当前请求：

http://localhost/tasks/user?page=0&size=30 

所需请求：

http://localhost/tasks/user?page=0&size=30&sort=name&order=asc 

---

Paginator提供3种获取和排序模式：

• 客户端

  ：全部在客户端上。自己输入数据

• server

  ：从API获取数据（例如：

  collection.getFirstPage（）

  ）并接收总页数

• infinite

  ：类似于

  服务器

  模式，但最好与未知页数一起使用。类似于外部API的搜索结果

确保您正在使用

PageableCollection

上的

mode

属性的

server

值

var books = new Books([
  { name: "A Tale of Two Cities" },
  { name: "Lord of the Rings" },
  // ...
], {
  // Paginate and sort on the server side, this is the default.
  mode: "server",
});

或在集合类定义中：

module.exports = Backbone.PageableCollection.extend({
    mode: "server", // this is the default
    initialize: /*...*/

除此之外，这可能在Backgrid中是可以解决的

Backgrid的默认设置是在客户端进行排序。对于自定义行为，您可以

• 或者使用您自己的实现

使用

主干.PageableCollection

设定目标

覆盖

HeaderCell

视图 允许您在列上使用不同的标题单元格类。标题单元格必须执行的操作没有限制。实际上，可以使用任何

主干.View

类。但是，如果您希望修改分拣机的行为方式，您必须 实施分拣协议。有关详细信息，请参阅

var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
  // Implement your "select all" logic here
});

var grid = new Backgrid.Grid({

  columns: [{
    name: "selected",
    label: "",
    sortable: false,
    cell: "boolean",
    headerCell: SelectAllHeaderCell
  }],

  collection: col
});

---

注意（2017/01/30）：文档中指向的链接不是最新的，这一点正在中讨论。

是否真的需要实现自己的逻辑？我看到了一些示例，其中客户机/服务器的切换是在后台实现的，没有任何自定义实现。但是使用这段代码对我不起作用。@enigma969我添加了关于分页器模式的信息，但是默认值应该是正确的。您可能需要捕捉排序的点击，调整集合排序字段，然后获取页面。@enigma969我添加了有关将

PageableCollection

集合添加到网格的信息

var SelectAllHeaderCell = Backgrid.HeaderCell.extend({
  // Implement your "select all" logic here
});

var grid = new Backgrid.Grid({

  columns: [{
    name: "selected",
    label: "",
    sortable: false,
    cell: "boolean",
    headerCell: SelectAllHeaderCell
  }],

  collection: col
});