You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
4.3 KiB
100 lines
4.3 KiB
<!DOCTYPE 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">
|
|
|
|
function detailFormatter(index, row) {
|
|
var html = [];
|
|
$.each(row, function (key, value) {
|
|
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
|
|
});
|
|
return html.join('');
|
|
}
|
|
|
|
function DoOnCellHtmlData(cell, row, col, data) {
|
|
var result = "";
|
|
if (typeof data != 'undefined' && data != "") {
|
|
var html = $.parseHTML(data);
|
|
|
|
$.each( html, function() {
|
|
if ( typeof $(this).html() === 'undefined' )
|
|
result += $(this).text();
|
|
else if ( typeof $(this).attr('class') === 'undefined' || $(this).hasClass('th-inner') === true )
|
|
result += $(this).html();
|
|
});
|
|
}
|
|
return result;
|
|
}
|
|
|
|
$(function () {
|
|
$('#toolbar').find('select').change(function () {
|
|
$('#table').bootstrapTable('refreshOptions', {
|
|
exportDataType: $(this).val()
|
|
});
|
|
});
|
|
})
|
|
|
|
$(document).ready(function()
|
|
{
|
|
$('#table').bootstrapTable('refreshOptions', {
|
|
exportOptions: {ignoreColumn: [0,1], // or as string array: ['0','checkbox']
|
|
onCellHtmlData: DoOnCellHtmlData}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 align="center">Data</h1><br>
|
|
<div id="toolbar">
|
|
<select class="form-control">
|
|
<option value="">Export Basic</option>
|
|
<option value="all">Export All</option>
|
|
<option value="selected">Export Selected</option>
|
|
</select>
|
|
</div>
|
|
<table id="table"
|
|
data-toggle="table"
|
|
data-height="600"
|
|
data-show-toggle="true"
|
|
data-show-columns="true"
|
|
data-show-export="true"
|
|
data-click-to-select="true"
|
|
data-toolbar="#toolbar"
|
|
data-pagination="true"
|
|
data-search="true"
|
|
data-detail-view="true"
|
|
data-detail-formatter="detailFormatter"
|
|
data-filter-control="true"
|
|
data-url="tableExport.json">
|
|
<thead>
|
|
<tr>
|
|
<th data-field="checkbox" data-checkbox="true" > </th>
|
|
<th data-field="Rank" data-sortable="true" data-filter-control="select" data-visible="true" >Rank </th>
|
|
<th data-field="Flag" data-sortable="true" data-filter-control="input" data-visible="false" >Flag </th>
|
|
<th data-field="Country" data-sortable="true" data-filter-control="select" data-visible="true" >Country </th>
|
|
<th data-field="Population" data-sortable="true" data-filter-control="select" data-visible="false" >Population </th>
|
|
<th data-field="Date" data-sortable="true" data-filter-control="select" data-visible="true" >Date </th>
|
|
<th data-field="p_of_world" data-sortable="true" data-filter-control="select" data-visible="false" >% of world </th>
|
|
<th data-field="Language" data-sortable="true" data-filter-control="select" data-visible="true" >Language </th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|