社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

当按钮在页面初始化时被隐藏时,我如何获得要呈现的jQueryUI按钮图标?

Eric Belair • 5 年前 • 1201 次点击  

我正在使用DataTables构建一个基本的网格,用于列出可以订购的产品。表中的一列包含一个带有jQuery cart图标的“Add”按钮。图标只在DataTable输出的第一页的按钮上呈现。当我翻阅数据表时,按钮上不会呈现图标。如何使隐藏页上的按钮呈现图标?

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/53030
 
1201 次点击  
文章 [ 2 ]  |  最新文章 5 年前
Twisty
Reply   •   1 楼
Twisty    6 年前

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

希望能有所帮助。

epascarello
Reply   •   2 楼
epascarello    6 年前

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

var table = $('#YourTable')

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