JQuery UI Sortable + DataTables показывают все строки без обновления текущей страницы - PullRequest
Новая
       177

JQuery UI Sortable + DataTables показывают все строки без обновления текущей страницы

0 голосов
/ 06 августа 2020

У меня есть jquery ui sortable datatable, и я пытаюсь показать все строки при сортировке. Я показываю все строки, используя dataTable.page.len(-1).draw(false), а затем $(this).sortable('refresh'), чтобы разрешить сортировку вновь показанных строк.

Это работает нормально, однако refre sh строк приводит к тому, что заполнитель становится удален, но почему-то не помощник.

Как мне добавить все скрытые строки на текущую страницу, не обновляя текущие строки?

Я не уверен, верна ли моя идея, но я просто нужен заполнитель, чтобы остаться.

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

Пример: 

$('table').each(function() {
  var table = $(this);
  var dataTable = $(this).DataTable({
    "aaSorting": [[ 1, "asc" ]],
    stateSave: true,
    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
  });
  var thead = table.find('thead');
  var tbody = table.find('tbody');
  var dataTable = table.DataTable();
  var page_length = null;
  tbody.sortable({
    items: 'tr',
    axis: 'y',
    handle: '.handle',
    placeholder: 'ui-sortable-placeholder',
    start: function(event, ui) {
      ui.item.addClass('ui-sortable-item');

      ui.placeholder.height($(ui.item).height());
      ui.placeholder.width($(ui.item).width());

      // show all rows
      dataTable.page.len(-1).draw(false);

      // refresh so that newly shown rows are counted as sortable items
      $(this).sortable('refresh');

      // sort table by sequence
      dataTable.order([1, 'asc']).draw(false);
    },
    sort: function(event, ui) {
    },
  });
});
.ui-sortable-placeholder {
  background: #eee !important;
  border: 1px solid #ddd !important;
}

.handle {
  height: 30px;
  width: 30px;
  background: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<table>
  <thead>
    <tr>
      <th>handle</th>
      <th>Sequence</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="handle"></div></td>
      <td>1</td>
    </tr>
    <tr>
      <td><div class="handle"></div></td>
      <td>2</td>
    </tr>
    <tr>
      <td>Something</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>handle</th>
      <th>Sequence</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div class="handle"></div></td>
      <td>1</td>
    </tr>
  </tbody>
</table>

Вот что я пробовал:

Я попытался клонировать заполнитель и добавить клон в конец начального обратного вызова (после refre sh), но sortable не распознает клон как фактический заполнитель.

Я попытался запустить функции с данными, такие как dataTable.page.len(-1).draw(false), внутри .on('sortstart'), потому что это выполняется перед фактическим обратным вызовом. Я не совсем понимаю, почему это происходит, поэтому, если бы кто-то мог это объяснить, я был бы признателен.

1 Ответ

1 голос
/ 07 августа 2020

Рассмотрите возможность использования функции Row ReOrder в DataTables:

https://jsfiddle.net/Twisty/pmyw6do2/

JavaScript

$('table').each(function() {
  var table = $(this);
  var dataTable = $(this).DataTable({
    "aaSorting": [
      [1, "asc"]
    ],
    stateSave: true,
    "lengthMenu": [
      [10, 25, 50, 100, -1],
      [10, 25, 50, 100, "All"]
    ],
    rowReorder: true
  });
  var thead = table.find('thead');
  var tbody = table.find('tbody');
  var dataTable = table.DataTable();
  var page_length = null;
});

CSS

.ui-sortable-placeholder, .dt-rowReorder-moving {
  background: #eee !important;
  border: 1px solid #ddd !important;
}

.handle {
  height: 30px;
  width: 30px;
  background: #ccc;
}

HTML

<table>
  <thead>
    <tr>
      <th>handle</th>
      <th>Sequence</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="handle"></div>
      </td>
      <td>1</td>
    </tr>
    <tr>
      <td>
        <div class="handle"></div>
      </td>
      <td>2</td>
    </tr>
    <tr>
      <td>Something</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>handle</th>
      <th>Sequence</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="handle"></div>
      </td>
      <td>1</td>
    </tr>
  </tbody>
</table>

Подробнее: https://datatables.net/extensions/rowreorder/

...