tableexport.jquery.plugin
Version:
82 lines (69 loc) • 2.92 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>HTML table Export</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script type="text/javascript" src="../tableExport.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/export/bootstrap-table-export.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/extensions/toolbar/bootstrap-table-toolbar.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />
<script type="text/javaScript">
$(document).ready(function()
{
var $table = $('#table');
$table.bootstrapTable('refreshOptions', {
exportOptions: {},
onExpandRow: function(index, row, $detail) {
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'col3',
title: 'Col3'
}, {
field: 'col4',
title: 'Col4'
}, {
field: 'col5',
title: 'Col5'
}],
data: row.nested,
detailView: row.nested[0]['other'] !== undefined,
onExpandRow: function(indexb, rowb, $detailb) {
$detailb.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'col6',
title: 'Col6'
}, {
field: 'col7',
title: 'Col7'
}],
data: rowb.other
});
}
});
}
});
});
</script>
</head>
<body>
<table id="table"
data-toggle="table"
data-show-export="true"
data-pagination="false"
data-search="true"
data-detail-view="true"
data-url="bootstrap3.json">
<thead>
<tr>
<th data-field="col1" data-sortable="true">Col 1</th>
<th data-field="col2" data-sortable="true">Col 2</th>
</tr>
</thead>
</table>
</body>
</html>