File
Login or Register via GitHub
<html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <!--@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> <!-- jQuery --> <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- DataTables --> <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"> </script></head><body> <table name="item" id="item" style=" border-style: ridge" class="test" width="100%" cellspacing="0"> <thead> <tr style="border-style: none !important"> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr class="firstLine"> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> </tbody> </table> input:focus::placeholder { color: transparent; } tr td{ border-bottom: 1px solid #D3D3D3; } tfoot { display: table-header-group; } tr{ border: none; } th { position: relative; width: auto; background: #f5f5f5 !important; color: #4771b0; font-weight: 700; padding: 6px 5px 4px !important; } .test { border: 1px solid #c1c1c1; text-align: left; } $(document).ready(function () { // Setup - add a text input to each footer cell $('#item tfoot th').each(function () { $(this).html('<input type="text" style="color: black" placeholder="(All)" />'); }); // DataTable var otable = $('#item').DataTable({ "paging": false, "dom": 'lrtip', "bInfo": false, "bLengthChange": false, "pageLength": 200 }); // Apply the search otable.columns().every(function () { var that = this; $('input', this.footer()).on('keyup change', function () { if (that.search() !== this.value) { that .search(this.value) .draw(); } }); }); });
You can jump to the latest bin by adding /latest to your URL
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + [ | Indents selected lines |
| ctrl + ] | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Clone Bin |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |