jQuery toggleClass example

Toggle class name on click in jQuery

by jimcan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap.css">
<h1 class="page_title">Dropup collection</h1>

<div class="info" style="min-height: 4em;">
					<p>This example shows the <code>dropup</code> option for a collection button being used with Datatables and Bootstrap 3.</p>
          <p>With CSS fixes for the popup to drop up correctly.</p>
          <p>NB: the <code>collection button</code> is at the bottom.</p>
				</div>

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
               ...

CSS

body {
  padding: 20px;
}

.table-bottom .dataTables_paginate {
  float: right;
}

body {
  padding: 20px;
}

.table-bottom .dataTables_paginate {
  float: right;
}

div.dt-button-collection {
	position: absolute;
	z-index: 2001;
}

ul.dropdown-menu {
	position: relative;
	display: block;
	z-index: 2002;
	min-width: 100%;
}

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'BfrtBip',
        buttons: [
            {
                extend: 'collection',
                text: 'Pop up collection',
                buttons: [
                    { text: 'Pop item 1' },
                    { text: 'Pop item 2' },
                    { text: 'Pop item 3' },
                    { text: 'Pop item 4' },
                    { text: 'Pop item 5' },
                    { text: 'Pop item 6' },
                    { text: 'Pop item 7' }
                ],
                dropup: true
            }
        ]
    } );
} );