<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 ---------->
<div class="container">
<div class="row">
<div class="row col-xs-12>
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group col-xs-6">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Invoice Month</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#Jjanuary">January</a></li>
<li><a href="#february">February</a></li>
<li><a href="#march">March</a></li>
<li class="divider"></li>
<li><a href="#all">Anything</a></li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" placeholder="Search for customer...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
</br>
<div class="row well">
<div class="row">
<div class="col-xs-12">
<div class="invoice-title">
<h2>Invoice</h2><h3 class="pull-right">Order # 12345</h3>
</div>
<hr>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Billed To:</strong><br>
John Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Shipped To:</strong><br>
Jane Smith<br>
1234 Main<br>
Apt. 4B<br>
Springfield, ST 54321
</address>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<address>
<strong>Payment Method:</strong><br>
Visa ending **** 4242<br>
jsmith@email.com
</address>
</div>
<div class="col-xs-6 text-right">
<address>
<strong>Order Date:</strong><br>
March 7, 2014<br><br>
</address>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<strong>Order summary</strong>
</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<!--Grid-->
<!--http://bootsnipp.com/snippets/1KmWy-->
<!--<div class="container">
<div class="row">
<h2>simple GRID</h2>
</div>
<div class="row">
<h3 class="text-center text-primary">Persons</h3>
<div class="col-md-12">-->
<!--<table class="table table-hover" id="worked">
<thead>-->
<tr>
<th>Case Number</th>
<th>Case Record Type</th>
<th>AC Dealer Id</th>
<th>Dealership Name</th>
<th>Polling Frequency</th>
<th>Monthly Fee</th>
<th>
<button type="button" class="btn btn-blue add-row">+</button>
</th>
</br>
<th>Setup Fee</th>
<th>
<button type="button" class="btn btn-blue add-row">+</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
<td>
<input class="form-control" type="text">
</td>
<td>
<button type="button" class="btn btn-danger delete-row">-</button>
</td>
</tr>
<!--End Grid-->
</tbody>
</table>
</div>
</div>
</div>
<a href="#" class="save pull-right"><button type="button" class="btn btn-lg btn-primary""><i class="fa fa-spinner fa-spin"></i> Save</button>
</div>
</div>
</div>
<div class="row col-xs-12>
<div class="col-xs-8 col-xs-offset-2">
<div>
<container>
<a href="#" class="export"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-download-alt"></span> Download table data into Excel
</button></a>
<a href="#" class="send"><button type="button" onclick="location.href ='/billing/invoice/id?generate=xls';" class="btn btn default btn-lg"><span class="glyphicon glyphicon-send"></span> Send Excel Invoice to Customer
</button></a>
<a href="#" class="upload"><button type="button" class="btn btn-default btn-lg disabled"><span class="glyphicon glyphicon-export"></span> Export Invoice to Peachtree
</button></a>
<a href="#" class="print"><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-print"></span> Print Invoice
</button></a>
</container>
</div>
</div>
body{
margin-top:20px;
}
.invoice-title h2, .invoice-title h3 {
display: inline-block;
}
.table > tbody > tr > .no-line {
border-top: none;
}
.table > thead > tr > .no-line {
border-bottom: none;
}
.table > tbody > tr > .thick-line {
border-top: 2px solid;
}
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
// JS for Exporting Excel File
<script type="text/javascript">
$(document).ready(function () {
function exportTableToCSV($table, filename) {
var $rows = $table.find('tr:has(td)'),
// Temporary delimiter characters unlikely to be typed by keyboard
// This is to avoid accidentally splitting the actual contents
tmpColDelim = String.fromCharCode(11), // vertical tab character
tmpRowDelim = String.fromCharCode(0), // null character
// actual delimiter characters for CSV format
colDelim = '","',
rowDelim = '"\r\n"',
// Grab text from table into CSV formatted string
csv = '"' + $rows.map(function (i, row) {
var $row = $(row),
$cols = $row.find('td');
return $cols.map(function (j, col) {
var $col = $(col),
text = $col.text();
return text.replace('"', '""'); // escape double quotes
}).get().join(tmpColDelim);
}).get().join(tmpRowDelim)
.split(tmpRowDelim).join(rowDelim)
.split(tmpColDelim).join(colDelim) + '"',
// Data URI
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
$(this)
.attr({
'download': filename,
'href': csvData,
'target': '_blank'
});
}
// This must be a hyperlink
$(".export").on('click', function (event) {
// CSV
exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
// IF CSV, don't do event.preventDefault() or return false
// We actually need this to be a typical hyperlink
});
});
