How can I load colvis option on page load event?

deep007

So, we all know when we click on the button and we have colvis option then we can make fields visible and non-visible. What I want to achieve is whenever the page gets open that colvis option gets open without clicking that button. so is there any way?

Currently I am using this code..

       $('#reportCustomData').DataTable( {

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

kthorngren

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

Kevin

deep007

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

I have put this code in $(document).ready(function() { }. So i tried different ways but not getting it..

deep007

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

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

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

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');
            }
        })
    });`