Answers

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 2019

  You can use the button().trigger() to programmatically trigger the button.

  Kevin
• deep007 Posts: 17Questions: 2Answers: 0

  July 2019

  please don't mind me asking a few questions.. regarding this.
  Still, confuse.. could you please explain a bit more how can I use that trigger event in my code... I have 3 different buttons...
• deep007 Posts: 17Questions: 2Answers: 0

  July 2019

  I have put this code in $(document).ready(function() { }. So i tried different ways but not getting it..
• deep007 Posts: 17Questions: 2Answers: 0

  July 2019

  Ok, let me explain where I got stuck...

  on page name 'mycustomReportData' with button().trigger() I have load that colvis option on page load event. This is done perfectly. Thank you for your suggestion @kthorngren

            $(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();   
  } );
  

  now What I want to achieve is,
  I am calling that report created page 'mycustomReportData' on some another page name 'customDisplayData' and opening it into a bootstrap modal. So when user click on the click event bootstrap modal will get open and it will load this ( 'mycustomReportData') page's data in its body. but on the time of the modal event, that button is not getting trigger...

  In short, whenever bootstrap modal gets open it should display that colvis option. How to archive this?

  here is my code.

            <!-- 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 'downloadCustomDataFromReports.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');
  
  });
        </script>
  
• deep007 Posts: 17Questions: 2Answers: 0

  July 2019

  Got the problem... over there it's get called in on document ready event but on the time of calling the bootstrap modal that event doesn't get performed... as it is just including that file not creating one...still out of solution...
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  July 2019

  I've never used Bootstrap modals but my guess is you will want to use a Modal event and use button().trigger() within the event.

  Kevin
• deep007 Posts: 17Questions: 2Answers: 0

  July 2019 edited July 2019

  Ok, so I have got one option for this. I have connected manually created one jQuery. That jQuery will connect colvis option with my checklist items. So on check change event, it gets trigger and then I allow the user to download it. So you can close this now. Thanks for the help.

            $('input.columnCreatedCheckboxs').on('click', function (ev) { 
          var title = $(ev.target).data('title');
  
          if($('.dt-buttons .dt-button-collection .dt-button:eq(0)').length === 0) {
              $('.dt-buttons .dt-button:eq(0)').trigger('click');
          }
  
          $('.dt-buttons .dt-button-collection button').each(function() {
              if ($(this).text() === title) {
                  $(this).trigger('click');
              }
          })
      });`