"Bootstrap styling for Datatable"
Bootstrap 3.3.0 Snippet by adriano3429

Post to Facebook Tweet this

<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 language="JavaScript" src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css"> <body> <div class="container"> <section class="content"> <h1>Table Filter</h1> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" onclick="checkAll(this)"></th> <th>Placa</th> <th>Observação</th> <th>Origem</th> <th>Destino</th> <th>km/h</th> <th>Data</th> <th>Valor</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <th><input type="checkbox" onclick="checkAll(this)"></th> <td>Tiger Nixon</td> <td>System Architect</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>04/25/2020 13:10</td> <td>$320,800</td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"> </span> </button> </p> </td> <tr> <th><input type="checkbox" onclick="checkAll(this)"></th> <td>Tiger Nixon</td> <td>System Architect</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>04/25/2020 13:10</td> <td>$320,800</td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"> </span> </button> </p> </td> <tr> <th><input type="checkbox" onclick="checkAll(this)"></th> <td>Tiger Nixon</td> <td>System Architect</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>04/25/2020 13:10</td> <td>$320,800</td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"> </span> </button> </p> </td> <tr> <th><input type="checkbox" onclick="checkAll(this)"></th> <td>Tiger Nixon</td> <td>System Architect</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>04/25/2020 13:10</td> <td>$320,800</td> <td> <p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"> </span> </button> </p> </td> </tr> </tbody> </table> </div> </div> </div> <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4> </div> <div class="modal-body"> <div class="form-group"> <input class="form-control " type="text" placeholder="Tiger Nixon"> </div> <div class="form-group"> <input class="form-control " type="text" placeholder="System Architect"> </div> <div class="form-group"> <input class="form-control " type="text" placeholder="Edinburgh"> </div> </div> <div class="modal-footer "> <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4> </div> <div class="modal-body"> <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div> </div> <div class="modal-footer "> <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> </div> </section> </body>
.pagination>li { display: inline; padding:0px !important; margin:0px !important; border:none !important; } .modal-backdrop { z-index: -1 !important; } /* Fix to show in full screen demo */ iframe { height:700px !important; } .btn { display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border-radius: 100px; } .btn-primary { color: #fff !important; background: #428bca !important; border-color: #357ebd !important; box-shadow:none !important; } .btn-danger { color: #fff !important; background: #d9534f !important; border-color: #d9534f !important; box-shadow:none !important; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } .panel { border: 1px solid #ddd; background-color: #fcfcfc; }
$(document).ready(function() { $('#datatable').dataTable(); $("[data-toggle=tooltip]").tooltip(); } ); function checkAll(bx) { var cbs = document.getElementsByTagName('input'); for(var i=0; i < cbs.length; i++) { if(cbs[i].type == 'checkbox') { cbs[i].checked = bx.checked; } } }

Related: See More

Vuetify Material Dashboard
Bootstrap Snippet for Datatable
Required field styling with tooltip

Questions / Comments: