时间戳

首页 > 解决方案 > 如何让 Modal 超过第 1 页的数据表和 Bootstrap 4

html - 如何让 Modal 超过第 1 页的数据表和 Bootstrap 4

问题描述

我知道我没有列出代码，但我仍然想提出这个问题，直到我可以得到一些代码。

boostrap 4 模态是否适用于超过 1 页的数据表？

它不适合我。当我搜索或转到表格的不同页面时，模式不会弹出。

<table id="example1" class="table table-bordered table-striped">
 <thead>
  <tr>
    <th>Asset ID</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td><button style='background-color: Transparent;border: none' data-id='16' class='asset_quick_view'><font color='blue'>A0016A</font></button></td>           
    </tr>

.... repeat for over 10 times to get more than 1 page

  </tbody>
  <tfoot>
    <tr>
      <th>Asset ID</th>
    </tr>
  </tfoot>
</table>



<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Asset Info</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <!--<button type="button" class="btn btn-primary">Save changes</button>-->
      </div>
    </div>
  </div>
</div>
        <script>
                $(document).ready( function() {
                        $('.asset_quick_view').click( function() {
                                var asset_id = $(this).data('id');

                                // AJAX
                                $.ajax( {
                                        url: 'get_asset_info.php',
                                        type: 'post',
                                        data: {asset_id: asset_id},
                                        success: function( response ) {
                                                // Add response in modal body
                                                $('.modal-body').html(response);
                                                // Display Modal
                                                $('#exampleModal').modal('show');
                                        }
                                });
                        });
                });
        </script>

标签： htmlbootstrap-4

解决方案

尝试在表的 tbody 上使用委托事件处理程序，如数据表示例中所示。由于表格本身及其主体将是稳定的（即使在切换页面之后），点击监听器将保持有效。

$('#example1 tbody').on('click', 'td', function() {
   // ... your code
});

jQuery 网站上的附加说明：https ://learn.jquery.com/events/event-delegation/

推荐阅读