当按钮在页面初始化时隐藏时，如何获取要呈现的 jQueryUI 按钮图标？

Posted 2023-05-09

【中文标题】当按钮在页面初始化时隐藏时，如何获取要呈现的 jQueryUI 按钮图标？

【英文标题】：How can I get jQueryUI button icons to be rendered when the buttons are hidden on page initialization?

【发布时间】：2019-06-18 14:01:43

【问题描述】：

我正在使用 DataTables 构建一个基本网格，用于列出可以订购的产品。表中的一列包括一个带有 jQ​​uery 购物车图标的“添加”按钮。图标仅呈现在 DataTable 输出的第一页上的按钮上。当我翻阅 DataTable 时，图标不会呈现在按钮上。如何让图标呈现在隐藏页面上的按钮上？

【问题讨论】：

最好看看您是如何初始化数据表的。如果您在 html 中创建按钮，您还可以添加类来创建您想要的外观和感觉，而无需通过 jQuery 进行初始化。

【参考方案1】：

自从我使用数据表以来已经有一段时间了，但是您需要在页面加载时监听事件，然后才能初始化按钮

var table = $('#YourTable')

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

【讨论】：

试过玩这个，但是，不能让它工作....会继续摆弄...

【参考方案2】：

您可以将 CSS 用于 jQuery UI 中的按钮样式。请考虑以下示例。

$(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>

希望对您有所帮助。