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

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

获取数据等操作毫无问题。但是当点击插入符号时，排序是在客户端上完成的。但是，当单击列标题(在服务器上排序)时，我需要将属性"sort"one_answers"order"附加到请求URL。

当前请求：

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

所需请求：

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

Answer 1

分页器提供了三种获取和排序模式：

• 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的默认设置是在客户端上进行排序。对于自定义行为，您可以

• 提供Backbone.PageableCollection
• 或者使用自己的实现覆盖HeaderCell视图

使用Backbone.PageableCollection

设置Grid的collection属性。

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文档的链接不是最新的，这将在第664期中讨论。