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

Question

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

基类

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'
    }
],

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

当前请求：

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

需要的请求：

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

Answer 1

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

• client：全在客户端。自己提供数据。
• server：从 API 获取数据（例如：collection.getFirstPage()）并接收总页数。
• infinite：类似于server 模式，但最好用于未知页数。类似于来自外部 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 的默认设置是在客户端进行排序。对于自定义行为，您可以

• provide a Backbone.PageableCollection
• 或 override the HeaderCell view 使用您自己的实现

使用Backbone.PageableCollection

设置collection property of the Grid。

var taskGrid = new Backgrid.Grid({
  collection: collections.myTasks,
  columns: [/*...*/],
});

覆盖HeaderCell 视图

您可以在列上使用不同的标题单元格类。标题单元格必须做什么没有限制。事实上，任何Backbone.View 类都可以使用。但是，如果您想修改分拣机的行为方式，您必须 实现排序协议。详见JSDoc。

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)： 文档中指向 API documentation 的链接不是最新的，issue #664 正在对此进行讨论。