Created
February 5, 2020 10:42
-
-
Save lucasgautheron/c4816c7c18b06b50339263b23a083428 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> | |
| <meta name="apple-mobile-web-app-title" content="CodePen"> | |
| <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> | |
| <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" /> | |
| <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("resize", "*"); | |
| } | |
| </script> | |
| </head> | |
| <body translate="no" > | |
| <div class="container"> | |
| <h1>Bootstrap Table</h1> | |
| <p> Mémo pour les options du Bootstrap Table : <a href="http://bootstrap-table.wenzhixin.net.cn/documentation/">Bootstrap Table Documentation</a></p> | |
| <p>Eléments de Bootstrap Table utilisés : <a href="http://jsfiddle.net/wenyi/e3nk137y/3178/">Data Checkbox</a>, pour cocher les éléments à sélectionner, <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/filter-control.html">extension Filter control</a>, pour les filtres via les colonnes, <a href="https://github.com/kayalshri/tableExport.jquery.plugin">extension Data export</a> pour exporter</p> | |
| <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-search="true" | |
| data-filter-control="true" | |
| data-show-export="true" | |
| data-click-to-select="true" | |
| data-toolbar="#toolbar"> | |
| <thead> | |
| <tr> | |
| <th data-field="state" data-checkbox="true"></th> | |
| <th data-field="prenom" data-filter-control="input" data-sortable="true">Prénom</th> | |
| <th data-field="date" data-filter-control="select" data-sortable="true">Date</th> | |
| <th data-field="examen" data-filter-control="select" data-sortable="true">Examen</th> | |
| <th data-field="note" data-sortable="true">Note</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td> | |
| <td>Valérie</td> | |
| <td>01/09/2015</td> | |
| <td>Français</td> | |
| <td>12/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td> | |
| <td>Eric</td> | |
| <td>05/09/2015</td> | |
| <td>Philosophie</td> | |
| <td>8/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td> | |
| <td>Valentin</td> | |
| <td>05/09/2015</td> | |
| <td>Philosophie</td> | |
| <td>4/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td> | |
| <td>Valérie</td> | |
| <td>05/09/2015</td> | |
| <td>Philosophie</td> | |
| <td>10/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td> | |
| <td>Eric</td> | |
| <td>01/09/2015</td> | |
| <td>Français</td> | |
| <td>14/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td> | |
| <td>Valérie</td> | |
| <td>07/09/2015</td> | |
| <td>Mathématiques</td> | |
| <td>19/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="6" name="btSelectItem" type="checkbox"></td> | |
| <td>Valentin</td> | |
| <td>01/09/2015</td> | |
| <td>Français</td> | |
| <td>11/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="7" name="btSelectItem" type="checkbox"></td> | |
| <td>Eric</td> | |
| <td>01/10/2015</td> | |
| <td>Philosophie</td> | |
| <td>8/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="8" name="btSelectItem" type="checkbox"></td> | |
| <td>Valentin</td> | |
| <td>07/09/2015</td> | |
| <td>Mathématiques</td> | |
| <td>14/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="9" name="btSelectItem" type="checkbox"></td> | |
| <td>Valérie</td> | |
| <td>01/10/2015</td> | |
| <td>Philosophie</td> | |
| <td>12/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="10" name="btSelectItem" type="checkbox"></td> | |
| <td>Eric</td> | |
| <td>07/09/2015</td> | |
| <td>Mathématiques</td> | |
| <td>14/20</td> | |
| </tr> | |
| <tr> | |
| <td class="bs-checkbox "><input data-index="11" name="btSelectItem" type="checkbox"></td> | |
| <td>Valentin</td> | |
| <td>01/10/2015</td> | |
| <td>Philosophie</td> | |
| <td>10/20</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-db44b196776521ea816683afab021f757616c80860d31da6232dedb8d7cc4862.js"></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="rendered-js" > | |
| //exporte les données sélectionnées | |
| var $table = $('#table'); | |
| $(function () { | |
| $('#toolbar').find('select').change(function () { | |
| $table.bootstrapTable('refreshOptions', { | |
| exportDataType: $(this).val() }); | |
| }); | |
| }); | |
| var trBoldBlue = $("table"); | |
| $(trBoldBlue).on("click", "tr", function () { | |
| $(this).toggleClass("bold-blue"); | |
| }); | |
| //# sourceURL=pen.js | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment