Sorting 具有aui分页和datatable排序的表

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

我的代码是如何工作的：我将我的大表划分为小表，并用一个页面链接每个表

这是我的密码：

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();
});

---

您可以通过一些更改来实现这一点：

您需要一个隐藏的

DataTable

，其中包含所有数据：

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

不要收听

Paginator

的

changeRequest

事件，而是收听

pageChange

事件：

on: { pageChange: function (event) { // ...

在

pageChange

功能中，将每页设置为
hiddendatable
的
数据的一个片段

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：

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

完成此操作后，每次按列排序时，所有数据都将被排序，用户将被发送到第一页。下面是一个使用示例代码的可运行示例：

YUI（）。使用（'aui-datatable'，'aui分页'，'datatable排序'，函数（Y）{
变量数据页=[{
电话：345678901，
寄存器：'\x65\x66\x67\x68\x69\x70\x71\x72'
}, {
电话：456789012，
寄存器：'\x66\x67\x68\x69\x70\x71\x72\x73'
}, {
电话：567890123，
寄存器：'\x67\x68\x69\x70\x71\x72\x73\x74'
}, {
电话：'678901234'，
寄存器：'\x68\x69\x70\x71\x72\x73\x74\x75'
}, {
电话：'789012345'，
寄存器：'\x69\x70\x71\x72\x73\x74\x75\x76'
}, {
电话：890123456，
寄存器：'\x70\x71\x72\x73\x74\x75\x76\x77'
}, {
电话：901234567，
寄存器：'\x71\x72\x73\x74\x75\x76\x77\x78'
}, {
电话：012345678，
寄存器：'\x72\x73\x74\x75\x76\x77\x78\x79'
}, {
电话：123456789，
寄存器：'\x73\x74\x75\x76\x77\x78\x79\x80'
}, {
电话：234567890，
寄存器：'\x74\x75\x76\x77\x78\x79\x80\x81'
}, {
电话：345678901，
寄存器：'\x75\x76\x77\x78\x79\x80\x81\x82'
}, {
电话：456789012，
寄存器：'\x76\x77\x78\x79\x80\x81\x82\x83'
}, {
电话：567890123，
寄存器：'\x77\x78\x79\x80\x81\x82\x83\x84'
}, {
电话：321014567，
寄存器：“asdfasdf”
}, {
电话：'786234567'，
寄存器：“zxcvsdfg”
}, {
电话：451234567，
注册：'rtyucvbn'
}, {
电话：'678901234'，
寄存器：'\x78\x79\x80\x81\x82\x83\x84\x85'
}, {
电话：'789012345'，
寄存器：'\x79\x80\x81\x82\x83\x84\x85\x86'
}, {
电话：890123456，
寄存器：'\x80\x81\x82\x83\x84\x85\x86\x87'
}, {
电话：901234567，
寄存器：'\x81\x82\x83\x84\x85\x86\x87\x88'
}];
变量列=[{
键：“电话”，
标签：“电话”，
可排序：正确
}, {
键：'寄存器'，
标签：“寄存器”，
可排序：正确
}];
var hiddendatable=新的Y.DataTable({
列：列，
数据：数据页
});
var dataTable=新的Y.dataTable({
列：列
}).render（“#DataTableConsult”）；
var分页=新的Y分页({
contentBox:“#分页.aui分页内容”，
页码：1，
关于：{
页面更改：功能（事件）{
var hiddendata=hiddendatable.get（'data'）。\u项；
var dataPageOne=hiddentData.slice（0,6）；
var dataPageTwo=hiddentData.slice（6,12）；
var dataPageThree=hiddentData.slice（12,18）；
如果（event.newVal==1）{
dataTable.set（'data'，dataPageOne）；
}else if（event.newVal==2）{
dataTable.set（'data'，dataPageTwo）；
}else if（event.newVal==3）{
dataTable.set（'data'，datapage3）；
}
}
}
}).render（）；
dataTable.on（'sort'，函数（事件）{
hiddendatable.sort（event.sortBy）；
分页.set（'page'，1）；
});
});