Таблица с aui-pagination и datatable-sort

Я использую 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 pagination sorting alloy-ui
person Erixx    schedule 03.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать эту работу с несколькими изменениями:

  1. Вам нужен скрытый DataTable, который содержит все данные:

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

  2. Вместо того, чтобы слушать событие changeRequest Paginator, слушайте событие pageChange:

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

  3. В pageChange function установите для каждой страницы фрагмент data hiddenDataTable.

    var hiddentData = hiddenDataTable.get('data')._items;
var dataPageOne = hiddentData.slice(0, 6);
var dataPageTwo = hiddentData.slice(6, 12);
var dataPageThree = hiddentData.slice(12, 18);

  4. Наконец, прослушайте событие sort видимого DataTable, отсортируйте скрытые DataTable и установите страницу на 1:

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

Как только вы это сделаете, все данные будут сортироваться каждый раз, когда вы сортируете по столбцу, и пользователь будет отправлен на первую страницу. Вот работающий пример, использующий ваш пример кода:

YUI().use('aui-datatable', 'aui-pagination', 'datatable-sort', function(Y) {
  var dataPages = [{
    Tel: '345678901',
    Register: '\x65\x66\x67\x68\x69\x70\x71\x72'
  }, {
    Tel: '456789012',
    Register: '\x66\x67\x68\x69\x70\x71\x72\x73'
  }, {
    Tel: '567890123',
    Register: '\x67\x68\x69\x70\x71\x72\x73\x74'
  }, {
    Tel: '678901234',
    Register: '\x68\x69\x70\x71\x72\x73\x74\x75'
  }, {
    Tel: '789012345',
    Register: '\x69\x70\x71\x72\x73\x74\x75\x76'
  }, {
    Tel: '890123456',
    Register: '\x70\x71\x72\x73\x74\x75\x76\x77'
  }, {
    Tel: '901234567',
    Register: '\x71\x72\x73\x74\x75\x76\x77\x78'
  }, {
    Tel: '012345678',
    Register: '\x72\x73\x74\x75\x76\x77\x78\x79'
  }, {
    Tel: '123456789',
    Register: '\x73\x74\x75\x76\x77\x78\x79\x80'
  }, {
    Tel: '234567890',
    Register: '\x74\x75\x76\x77\x78\x79\x80\x81'
  }, {
    Tel: '345678901',
    Register: '\x75\x76\x77\x78\x79\x80\x81\x82'
  }, {
    Tel: '456789012',
    Register: '\x76\x77\x78\x79\x80\x81\x82\x83'
  }, {
    Tel: '567890123',
    Register: '\x77\x78\x79\x80\x81\x82\x83\x84'
  }, {
    Tel: '321014567',
    Register: 'asdfasdf'
  }, {
    Tel: '786234567',
    Register: 'zxcvsdfg'
  }, {
    Tel: '451234567',
    Register: 'rtyucvbn'
  }, {
    Tel: '678901234',
    Register: '\x78\x79\x80\x81\x82\x83\x84\x85'
  }, {
    Tel: '789012345',
    Register: '\x79\x80\x81\x82\x83\x84\x85\x86'
  }, {
    Tel: '890123456',
    Register: '\x80\x81\x82\x83\x84\x85\x86\x87'
  }, {
    Tel: '901234567',
    Register: '\x81\x82\x83\x84\x85\x86\x87\x88'
  }];

  var columns = [{
    key: 'Tel',
    label: 'Tel',
    sortable: true
  }, {
    key: 'Register',
    label: 'Register',
    sortable: true
  }];

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

  var dataTable = new Y.DataTable({
    columns: columns
  }).render('#DataTableConsult');

  var pagination = new Y.Pagination({
    contentBox: '#pagination .aui-pagination-content',
    page: 1,
    on: {
      pageChange: function(event) {
        var hiddentData = hiddenDataTable.get('data')._items;
        var dataPageOne = hiddentData.slice(0, 6);
        var dataPageTwo = hiddentData.slice(6, 12);
        var dataPageThree = hiddentData.slice(12, 18);

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

  dataTable.on('sort', function(event) {
    hiddenDataTable.sort(event.sortBy);
    pagination.set('page', 1);
  });
});
<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div id="pagination">
  <ul class="pagination aui-pagination-content">
    <li><a href="#">Prev</a>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">Next</a>
    </li>
  </ul>
</div>
<div id="DataTableConsult"></div>

Примечание. Этот метод не очень хорошо масштабируется (поскольку он отправляет все данные клиенту), поэтому я рекомендую выполнять такую ​​сортировку на сервере и отправлять клиенту только текущую страницу. Кроме того, это не кажется очень удобным для пользователя.

person stiemannkj1    schedule 18.05.2015