"View"
Bootstrap 3.3.0 Snippet by andreosebastiani

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 ----------> <!DOCTYPE html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" /> </head> <body> <br /> <br /> <div class="small-12 columns"> <div class="small-3 columns"> <div class="panel searchPanel small-12 columns"> <h4>Filters</h4> <br /> <div class="row"> <div class="small-3 small-offset-1 columns"> <label>ID</label> </div> <div class="small-8 columns"> <input type="text"> </div> </div> <div class="row"> <div class="small-3 small-offset-1 columns"> <label>Provider</label> </div> <div class="small-8 columns"> <select> <option value="husker">Joe</option> </select> </div> </div> <div class="row"> <div class="small-4 small-offset-1 columns" style="padding-bottom: 15px;"> <label>Date of Service</label> </div> <div class="small-8 columns"> </div> <div class="small-3 small-offset-2 columns"> <label>Beginning</label> </div> <div class="small-7 columns"> <div class="input-group"> <input class="input-group-field" type="number"> <div class="input-group-button"> <input type="submit" class="button" value="" style="width: 20px;"> </div> </div> </div> <div class="small-3 small-offset-2 columns"> <label>Ending</label> </div> <div class="small-7 columns"> <div class="input-group"> <input class="input-group-field" type="number"> <div class="input-group-button"> <input type="submit" class="button" value="" style="width: 20px;"> </div> </div> </div> </div> <div class="row"> <div class="small-3 small-offset-1 columns"> <label>Status</label> </div> <div class="small-8 columns"> <select> <option value="husker">Processed</option> </select> </div> </div> <div class="row"> <div class="small-11 columns"> <div class="small-2 small-offset-6 columns"> <a class="button secondary" href="#">Cancel</a> </div> <div class="small-2 columns"> <a class="button" href="#">Search</a> </div> </div> </div> </div> </div> <div class="small-9 columns"> <div class="row pull-left"> <a href="#">Back to Home</a> </div> <br /> <br /> <table width="100%" class="display" id="myTable" cellspacing="0"> <thead> <tr> <th>Claim ID</th> <th>Rendering Provider</th> <th>Service Date</th> <th>Billed Amount</th> <th>Allowed Amount</th> <th>Paid Amount</th> <th>Status</th> <th>Processed Date</th> <th class="no-sort"></th> </tr> </thead> <tbody> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>Joe Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>Jim Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>James Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>John Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>James Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>John Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>James Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>John Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>James Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>John Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>James Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> <tr> <td> <a href="#">xxxxxxxxxxx</a> </td> <td>John Smith</td> <td>03/12/2015</td> <td>$80.00</td> <td>$30.00</td> <td>$50.00</td> <td>Processed</td> <td>04/07/2015</td> <td> <a href="#">Details</a> </td> </tr> </tbody> </table> </div> </div> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> </body>
.searchPanel { background-color: #D3D3D3; }
$(document).ready(function(){ $('#myTable').DataTable({ "bLengthChange": false, "bFilter": false, "columnDefs": [ { "targets": 'no-sort', "orderable": false, } ] }); });

Related: See More

BLK• Design System
arrow key navigation thumbnail gallery modal view
eCommerce Quick view Popup & Product row
List Grid View

Questions / Comments: