Question

我正在使用AlloyUI来显示带有分页+ datatable-sort的表格。问题：数据仅在当前页面上排序。相反，我希望每次单击一列时对所有数据进行排序，并希望将用户发送回第一页。

我的代码如何工作：我将我的大表分成小表，并将每个表与一个页面链接。

这是我的代码：

YUI().use('aui-datatable', 'aui-pagination', 'datatable-sort', function (Y) 
{  
    dataPages = [{ .... }, { ... }, ... , { ... }];   => contains 18 rows
    var columns = [
         { key: 'Tel', label: 'Tel', sortable: true },
           ...
         { key: 'Register', label: 'Register', sortable: true }
    ];

    var dataTable = new Y.DataTable( 
            { columns: columns, data: dataPages} 
                                     ).render('#DataTableConsult');
    new Y.Pagination(
            {contentBox: '#pagination .aui-pagination-content', page: 1,
                  on: { changeRequest: function (event) {
    var dataPageOne = new Array();    ... i fill in this first table with lines N° 0 to 6 of dataPages table
    var dataPageTwo = new Array();    ... i fill in this first table with lines N° 7 to 13 of dataPages table
    var dataPageThree = new Array();  ... i fill in this first table with lines N° 14 to 17 of dataPages table

   if (event.state.page === 1) { dataTable.set('data', dataPageOne); }
   else if (event.state.page === 2) { dataTable.set('data', dataPageTwo); }
   else if (event.state.page === 3) { dataTable.set('data', dataPageThree); }}}}).render();
});

Answer 1

您可以通过一些更改来完成此工作：

您需要一个包含所有数据的隐藏DataTable：

var hiddenDataTable = new Y.DataTable({
    columns: columns,
    data: dataPages
});

不要收听Paginator的{{1}}事件，而是收听changeRequest事件：
```
pageChange
```
在on: { pageChange: function (event) { // ... pageChange中，将每个页面设置为function hiddenDataTable的一部分。
```
data
```
最后，听取可见var hiddentData = hiddenDataTable.get('data')._items; var dataPageOne = hiddentData.slice(0, 6); var dataPageTwo = hiddentData.slice(6, 12); var dataPageThree = hiddentData.slice(12, 18);的{{1}}事件，并对隐藏的sort进行排序并将页面设置为1：
```
DataTable
```

执行此操作后，每次按列排序时都会对所有数据进行排序，并将用户发送到第一页。以下是使用示例代码的可运行示例：

＆＃13;

DataTable

＆＃13;

dataTable.on('sort', function (event) {
    hiddenDataTable.sort(event.sortBy);
    pagination.set('page', 1);
});

＆＃13;

注意：此方法无法很好地扩展（因为它会将所有数据发送到客户端），因此我建议在后端进行此类排序，并仅将当前页面发送到客户端。此外，这似乎不是用户友好。

具有aui-pagination和datatable-sort的表

1 个答案: