如何将数据表的按钮触发事件加载到引导模式中?

时间:2019-07-02 22:00:09

标签: php jquery html datatable bootstrap-modal

我在这里有一页名称reportDataPrepare.php ...我创建了一个datatable,它将填充数据,并且在页面加载事件中将触发一个按钮事件,因此每当页面进入加载它会首先弹出该选项。在这里,它工作正常,供参考,这里是代码...

   $(document).ready(function() {
    var table = $('#reportCustomData').DataTable( {

      dom: 'Bfrtip',
      buttons: [
          {
            extend: 'colvis',
            collectionLayout: 'fixed four-column',
            text: 'Edit Rows',
            className: 'editRows'
          },
          {
              extend: 'excelHtml5',
              exportOptions: {
                  columns: ':visible',
                },
              text: 'Download Excel'
          },
          {
              extend: 'pdfHtml5',
              exportOptions: {
                  columns: [ 0, 1, 2, 5 ]    
              },
              text: 'Download PDF'
          }
      ]
  } );

 table.buttons('.editRows').trigger();   
} );

现在在另一个页面名称displayReportData.php上,我创建了一个引导程序模态,在模态的主体中,我包含了reportDataPrepare.php。因此,现在执行点击事件模态时,按钮会打开,但不会触发此table.buttons('.editRows').trigger();事件。我希望该事件在模态打开后立即触发。

这是我的代码...

 <!-- Modal -->
 <div class="modal fade" id="myCustomReport" role="dialog">
<div class="modal-dialog modal-lg">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Custom Download Reports</h4>
    </div>
    <div class="modal-body">
      <div class="table-responsive">
         <?php include 'reportDataPrepare.php'; ?>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>
</div>
  <script>
   $(document).on("click", ".downloadCustomDataReport", function(e){
    e.preventDefault();
    $('#myCustomReport').modal('show');

    });

那么有人可以指导我吗?我在哪里和哪里做错了?

0 个答案:

没有答案