我正在使用DataTables构建一个基本的网格,用于列出可以订购的产品。表中的一列包含一个带有jQuery cart图标的“Add”按钮。图标只在DataTable输出的第一页的按钮上呈现。当我翻阅数据表时,按钮上不会呈现图标。如何使隐藏页上的按钮呈现图标?
$(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;"> </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> </th> </tr> </tfoot> </table>
希望能有所帮助。
自从我使用数据表以来已经有一段时间了,但是您需要在加载页面时监听事件,然后才能初始化按钮
var table = $('#YourTable') table.on('page.dt', function () { table.find('button').button() });
