Skip to content

Instantly share code, notes, and snippets.

@lucasgautheron

lucasgautheron/bootstrap-dynamic-table.html

Created February 5, 2020 10:42
Show Gist options
  • Save lucasgautheron/c4816c7c18b06b50339263b23a083428 to your computer and use it in GitHub Desktop.
Save lucasgautheron/c4816c7c18b06b50339263b23a083428 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap-dynamic-table.html
<!DOCTYPE html>
<html lang=&quot;en&quot; >
<head>
<meta charset=&quot;UTF-8&quot;>
<link rel=&quot;apple-touch-icon&quot; type=&quot;image/png&quot; href=&quot;https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png&quot; />
<meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;CodePen&quot;>
<link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico&quot; />
<link rel=&quot;mask-icon&quot; type=&quot;&quot; href=&quot;https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg&quot; color=&quot;#111&quot; />
<title>CodePen - Bootstrap Table - Filter control</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<style>
.container {
width: 1024px;
padding: 2em;
}
.bold-blue {
font-weight: bold;
color: #0277BD;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage(&quot;resize&quot;, &quot;*&quot;);
}
</script>
</head>
<body translate=&quot;no&quot; >
<div class=&quot;container&quot;>
<h1>Bootstrap Table</h1>
<p> Mémo pour les options du Bootstrap Table : <a href=&quot;http://bootstrap-table.wenzhixin.net.cn/documentation/&quot;>Bootstrap Table Documentation</a></p>
<p>Eléments de Bootstrap Table utilisés : <a href=&quot;http://jsfiddle.net/wenyi/e3nk137y/3178/&quot;>Data Checkbox</a>, pour cocher les éléments à sélectionner, <a href=&quot;https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/filter-control.html&quot;>extension Filter control</a>, pour les filtres via les colonnes, <a href=&quot;https://github.com/kayalshri/tableExport.jquery.plugin&quot;>extension Data export</a> pour exporter</p>
<div id=&quot;toolbar&quot;>
<select class=&quot;form-control&quot;>
<option value=&quot;&quot;>Export Basic</option>
<option value=&quot;all&quot;>Export All</option>
<option value=&quot;selected&quot;>Export Selected</option>
</select>
</div>
<table id=&quot;table&quot;
data-toggle=&quot;table&quot;
data-search=&quot;true&quot;
data-filter-control=&quot;true&quot;
data-show-export=&quot;true&quot;
data-click-to-select=&quot;true&quot;
data-toolbar=&quot;#toolbar&quot;>
<thead>
<tr>
<th data-field=&quot;state&quot; data-checkbox=&quot;true&quot;></th>
<th data-field=&quot;prenom&quot; data-filter-control=&quot;input&quot; data-sortable=&quot;true&quot;>Prénom</th>
<th data-field=&quot;date&quot; data-filter-control=&quot;select&quot; data-sortable=&quot;true&quot;>Date</th>
<th data-field=&quot;examen&quot; data-filter-control=&quot;select&quot; data-sortable=&quot;true&quot;>Examen</th>
<th data-field=&quot;note&quot; data-sortable=&quot;true&quot;>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;0&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valérie</td>
<td>01/09/2015</td>
<td>Français</td>
<td>12/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;1&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Eric</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>8/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;2&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valentin</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>4/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;3&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valérie</td>
<td>05/09/2015</td>
<td>Philosophie</td>
<td>10/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;4&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Eric</td>
<td>01/09/2015</td>
<td>Français</td>
<td>14/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;5&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valérie</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>19/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;6&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valentin</td>
<td>01/09/2015</td>
<td>Français</td>
<td>11/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;7&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Eric</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>8/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;8&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valentin</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>14/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;9&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valérie</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>12/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;10&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Eric</td>
<td>07/09/2015</td>
<td>Mathématiques</td>
<td>14/20</td>
</tr>
<tr>
<td class=&quot;bs-checkbox &quot;><input data-index=&quot;11&quot; name=&quot;btSelectItem&quot; type=&quot;checkbox&quot;></td>
<td>Valentin</td>
<td>01/10/2015</td>
<td>Philosophie</td>
<td>10/20</td>
</tr>
</tbody>
</table>
</div>
<script src=&quot;https://static.codepen.io/assets/common/stopExecutionOnTimeout-db44b196776521ea816683afab021f757616c80860d31da6232dedb8d7cc4862.js&quot;></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script>
<script id=&quot;rendered-js&quot; >
//exporte les données sélectionnées
var $table = $('#table');
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('refreshOptions', {
exportDataType: $(this).val() });
});
});
var trBoldBlue = $(&quot;table&quot;);
$(trBoldBlue).on(&quot;click&quot;, &quot;tr&quot;, function () {
$(this).toggleClass(&quot;bold-blue&quot;);
});
//# sourceURL=pen.js
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment