table-view-columns.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://datatables.net" class="alert-link">http://datatables.net</a>.'
categories: [Widgets]
layout: page
title: Table View [Deprecated example] with column visibility, reordering
resource: true
url-js-extra: ['//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js', '//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js', '//cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js']
---
{% include widgets/table-view/tmpl/table-all.html %}
      <script>
        $(document).ready(function() {
          // Initialize Datatables
          var table = $('table').DataTable({
            // Customize the header and footer
            "dom": 'R<"dataTables_header"fCi>t<"dataTables_footer"p>',
            // Customize the ColVis button text so it's an icon and align the dropdown to the right side
            "colVis": {
              "buttonText": "<i class='fa fa-columns'></i>",
              "sAlign": "right"
            }
          });
          // On click of ColVis_Button, add Bootstrap classes and...
          $(".ColVis_Button").addClass("btn btn-default dropdown-toggle").click(function() {
            // Add Bootstrap classes to ColVis_Button's parent
            $(this).parent(".ColVis").addClass("btn-group open");
            // Add Bootstrap classes to the checkboxes
            $(".ColVis_collection label").addClass("checkbox");
            // Remove class from ColVis when clicking outside ColVis_Collection
            $(".ColVis_collectionBackground, .ColVis_catcher").click(function() {
              $(".ColVis").removeClass("open");
            });
          });
        });
      </script>