"Data Table"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-10"> <div class="table-responsive"> <table id="mytable" class="table table-bordred table-striped"> <thead> <th><input type="checkbox" id="checkall" /></th> <th>Name</th> <th>RSVP Date</th> <th>Number of Guests</th> <th>Reservation Status</th> <th>Comments</th> <th>Send Message</th> </thead> <tbody> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Molly Wahlberg</td> <td>2016-09-23</td> <td>5</td> <td>yes</td> <td>Please confirm my request. We really want to come</td> <td><p data-placement="top" data-toggle="tooltip" title="SendMessage"><button class="btn btn-primary btn-xs" data-title="SendMessage" data-toggle="modal" data-target="#edit" >Send Message <span class="glyphicon glyphicon-sms"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Grey Pippen</td> <td>2016-09-23</td> <td>10</td> <td>yes</td> <td> Looking forward to it.</td> <td><p data-placement="top" data-toggle="tooltip" title="SendMessage"><button class="btn btn-primary btn-xs" data-title="SendMessage" data-toggle="modal" data-target="#edit" >Send Message <span class="glyphicon glyphicon-sms"></span></button></p></td> </tr> <tr> <td><input type="checkbox" class="checkthis" /></td> <td>Big Girl</td> <td>2016-09-23</td> <td>10</td> <td>yes</td> <td>Ready to Have Fun</td> <td><p data-placement="top" data-toggle="tooltip" title="SendMessage"><button class="btn btn-primary btn-xs" data-title="SendMessage" data-toggle="modal" data-target="#edit" >Send Message <span class="glyphicon glyphicon-sms"></span></button></p></td> </tr> </tbody> </table>
$(document).ready(function(){ $("#mytable #checkall").click(function () { if ($("#mytable #checkall").is(':checked')) { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", true); }); } else { $("#mytable input[type=checkbox]").each(function () { $(this).prop("checked", false); }); } }); $("[data-toggle=tooltip]").tooltip(); });

Related: See More


Questions / Comments: