Как получить значки кнопок jQueryUI для отображения, когда кнопки скрыты при инициализации страницы?

Question

Я использую DataTables для построения базовой сетки для перечисления продуктов, которые можно заказать. В одном из столбцов таблицы есть кнопка «Добавить» со значком корзины JQuery. Значки отображаются на кнопках только на первой странице вывода DataTable. Когда я пролистываю таблицу данных, значки не отображаются на кнопках. Как я могу получить иконки для отображения на кнопках на скрытых страницах?

Answer 1

Вы можете использовать CSS для стиля кнопок в пользовательском интерфейсе jQuery. Рассмотрим следующий пример.

$(function() {
  $('#example').DataTable();
});

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th style="width: 25px;">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Add"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td><button class="ui-button ui-widget ui-corner-all ui-button-icon-only"><span class="ui-icon ui-icon-plus"></span>Add</button></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>&nbsp;</th>
    </tr>
  </tfoot>
</table>

Надеюсь, это поможет.

Answer 2

Прошло некоторое время, так как я использовал таблицы данных, но вам нужно прослушать событие, когда страница загружена, и чем вы можете инициировать свои кнопки

var table = $('#YourTable')

table.on('page.dt', function () {
  table.find('button').button()
});