<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 ----------> <h3>View Orders </h3> <hr> <div class="table-responsive"> <div class="bootstrap-table"> <div class="fixed-table-toolbar"> <div class="bars pull-left"> <div id="toolbargrid"> <div class="form-inline" role="form">   </div> </div> </div> </div> <div class="toolbar clearfix"> <div class="toolbar-left"> <button class="btn btn-primary">Add User</button> <div class="btn-group"> <input type="button" value="Options > " class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <ul class="dropdown-menu" role="menu"> <li><a href="/broker/order/cancel/all_request">Cancel All Orders</a></li> </ul> </div> <div class="btn-group"> <input type="button" value="All Orders > " class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <ul class="dropdown-menu" role="menu"> <li><a href="?order_filter=5">All Orders</a></li> <li><a href="?order_filter=1">Active Orders</a></li> <li><a href="?order_filter=2">Completed Orders</a></li> <li><a href="?order_filter=3">Cancelled Orders</a></li> <li><a href="?order_filter=4">Funds Needed Orders</a></li> </ul> </div> <a onclick="location.href = '/broker/order/view?generate=pdf';" class="btn btn-default" target="_blank"> <i class="fa fa-fw fa-file-pdf-o"></i> PDF</a> <a onclick="location.href = '/broker/order/view?generate=csv';" class="btn btn-default" target="_blank"> <i class="fa fa-fw fa-file-excel-o"></i> CSV</a> </div> <div class="toolbar-right"> <div class="form-inline" role="form"> <label for="dateStart">Date Start</label> <input value="01/01/2015" class="form-control" type="text" placeholder="Start Date" name="dateStart" id="dateStart"> <script>$('#dateStart').datepicker({format: 'mm/dd/yyyy'});</script> <label for="dateStop">Date End</label> <input value="01/30/2015" class="form-control" type="text" placeholder="Stop Date" name="dateStop" id="dateStop"> <script>$('#dateStop').datepicker({format: 'mm/dd/yyyy'});</script> <a class="btn btn-primary filter-dates" onclick="location.href = '/broker/order/view?dateStart='+$('#dateStart').val()+'&dateStop='+$('#dateStop').val(); ">Filter Dates</a> <input class="form-control table-search" type="text" placeholder="Search"> </div> </div> </div> <div class="fixed-table-container"> <div class="fixed-table-header"> <table></table> </div> <div class="fixed-table-body"> <table id="grid" class="table table-striped table-hover" data-toolbar="#toolbargrid" data-pagination="true" data-search="true"> <thead> <tr> <th class="text-left" style=""> <div class="th-inner sortable">Description</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Leads</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Order Type</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Status</div> <div class="fht-cell"></div> </th> <th class="text-left" style=""> <div class="th-inner sortable">Date Created</div> <div class="fht-cell"></div> </th> <th style=""> <div class="th-inner ">Options</div> <div class="fht-cell"></div> </th> </tr> </thead> <tbody> <tr data-index="0"> <td class="text-left" style="">Test</td> <td class="text-left" style=""><a href="/broker/order/1/lead" onclick="">1/1</a></td> <td class="text-left" style="">Buyer</td> <td class="text-left" style="">Completed</td> <td class="text-left" style="">01/29/2015 16:47:05</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/1" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> <a class="btn btn-primary" href="/broker/order/detail/1" data-toggle="tooltip" data-placement="top" title="View Order Detail"><i class="fa fa-fw fa-eye"></i></a> <a id="BTN_ORDER_CANCEL1" class="btn btn-primary" href="/broker/order/cancel/request/1" data-toggle="tooltip" data-placement="top" title="Cancel Order" style="display: none;"><i class="fa fa-fw fa-ban"></i></a><script>if ('Completed' !== 'Active' && 'Completed' !== 'Staged' && 'Completed' !== 'Funds Needed' ) { $('#BTN_ORDER_CANCEL1').hide(); } else { $('#BTN_ORDER_CANCEL1').show(); } </script> </td> </tr> <tr data-index="1"> <td class="text-left" style="">Test</td> <td class="text-left" style=""><a href="/broker/order/2/lead" onclick="">19/50</a></td> <td class="text-left" style="">Buyer</td> <td class="text-left" style="">Active</td> <td class="text-left" style="">01/29/2015 16:50:02</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/2" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> <a class="btn btn-primary" href="/broker/order/detail/2" data-toggle="tooltip" data-placement="top" title="View Order Detail"><i class="fa fa-fw fa-eye"></i></a> <a id="BTN_ORDER_CANCEL2" class="btn btn-primary" href="/broker/order/cancel/request/2" data-toggle="tooltip" data-placement="top" title="Cancel Order"><i class="fa fa-fw fa-ban"></i></a><script>if ('Active' !== 'Active' && 'Active' !== 'Staged' && 'Active' !== 'Funds Needed' ) { $('#BTN_ORDER_CANCEL2').hide(); } else { $('#BTN_ORDER_CANCEL2').show(); } </script> </td> </tr> <tr data-index="2"> <td class="text-left" style="">Test2</td> <td class="text-left" style=""><a href="/broker/order/3/lead" onclick="">9/50</a></td> <td class="text-left" style="">Buyer</td> <td class="text-left" style="">Active</td> <td class="text-left" style="">01/29/2015 17:07:54</td> <td style=""> <a class="btn btn-primary" href="/broker/order/clone/3" data-toggle="tooltip" data-placement="top" title="Clone Order"><i class="fa fa-fw fa-files-o"></i></a> <a class="btn btn-primary" href="/broker/order/detail/3" data-toggle="tooltip" data-placement="top" title="View Order Detail"><i class="fa fa-fw fa-eye"></i></a> <a id="BTN_ORDER_CANCEL3" class="btn btn-primary" href="/broker/order/cancel/request/3" data-toggle="tooltip" data-placement="top" title="Cancel Order"><i class="fa fa-fw fa-ban"></i></a><script>if ('Active' !== 'Active' && 'Active' !== 'Staged' && 'Active' !== 'Funds Needed' ) { $('#BTN_ORDER_CANCEL3').hide(); } else { $('#BTN_ORDER_CANCEL3').show(); } </script> </td> </tr> </tbody> <tfoot></tfoot> </table> </div> <div class="fixed-table-pagination"> <div class="pull-left pagination-detail"> <span class="pagination-info">Showing 1 to 3 of 3 rows</span> <span class="page-list" style="display: none;"> <span class="btn-group dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="page-size">10</span> <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li class="active"><a href="javascript:void(0)">10</a></li> </ul> </span> records per page </span> </div> <div class="pull-right pagination" style="display: none;"> <ul class="pagination"> <li class="page-first disabled"><a href="javascript:void(0)"><<</a></li> <li class="page-pre disabled"><a href="javascript:void(0)"><</a></li> <li class="page-number active disabled"><a href="javascript:void(0)">1</a></li> <li class="page-next disabled"><a href="javascript:void(0)">></a></li> <li class="page-last disabled"><a href="javascript:void(0)">>></a></li> </ul> </div> </div> </div> </div> <div class="clearfix"></div> </div>

.toolbar { margin-bottom: 20px; } .toolbar-left { float: left; margin-bottom: 20px; } .toolbar-right { float: right; margin-bottom: 20px; } @media (max-width: 1200px) { .toolbar-left { float: none; } .toolbar-right { float: none; } .filter-dates { display: block; .table-searc { display: block; }