File
Login or Register via GitHub
<html> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script><link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=766c9ac11eda67c01f759bab53b4774d.css" rel="stylesheet" type="text/css" /><script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=766c9ac11eda67c01f759bab53b4774d"></script><link href="https://nightly.datatables.net/searchpanes/css/searchPanes.dataTables.css" rel="stylesheet" type="text/css" /><script src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Location</th> <th>Permissions</th> </tr> </thead> <tfoot> <tr> <th>First name</th> <th>Last name</th> <th>Location</th> <th>Permissions</th> </tr> </tfoot> </table> </div> </body></html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;}$(document).ready( function () { var data = { "data": [ { "DT_RowId": "row_1", "users": { "first_name": "Quynn", "last_name": "Contreras", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "4", "name": "VMs" } ] }, { "DT_RowId": "row_7", "users": { "first_name": "Xantha", "last_name": "George", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [ { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_13", "users": { "first_name": "Lael", "last_name": "Kim", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [ { "id": "6", "name": "Accounts" }, { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_19", "users": { "first_name": "Mona", "last_name": "Terry", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [] }, { "DT_RowId": "row_25", "users": { "first_name": "Ishmael", "last_name": "Crosby", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [] }, { "DT_RowId": "row_31", "users": { "first_name": "Quinn", "last_name": "Mccall", "site": "1" }, "sites": { "name": "Edinburgh" }, "permission": [ { "id": "3", "name": "Desktop" } ] }, { "DT_RowId": "row_2", "users": { "first_name": "Kaitlin", "last_name": "Smith", "site": "2" }, "sites": { "name": "London" }, "permission": [ { "id": "1", "name": "Printer" }, { "id": "4", "name": "VMs" } ] }, { "DT_RowId": "row_8", "users": { "first_name": "Bryar", "last_name": "Long", "site": "2" }, "sites": { "name": "London" }, "permission": [ { "id": "1", "name": "Printer" } ] }, { "DT_RowId": "row_14", "users": { "first_name": "Lyle", "last_name": "Lewis", "site": "2" }, "sites": { "name": "London" }, "permission": [] }, { "DT_RowId": "row_20", "users": { "first_name": "Medge", "last_name": "Patterson", "site": "2" }, "sites": { "name": "London" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_26", "users": { "first_name": "Quintessa", "last_name": "Pickett", "site": "2" }, "sites": { "name": "London" }, "permission": [] }, { "DT_RowId": "row_32", "users": { "first_name": "Alexa", "last_name": "Wilder", "site": "2" }, "sites": { "name": "London" }, "permission": [ { "id": "4", "name": "VMs" } ] }, { "DT_RowId": "row_3", "users": { "first_name": "Cruz", "last_name": "Reynolds", "site": "3" }, "sites": { "name": "Paris" }, "permission": [] }, { "DT_RowId": "row_9", "users": { "first_name": "Kuame", "last_name": "Wynn", "site": "3" }, "sites": { "name": "Paris" }, "permission": [ { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_15", "users": { "first_name": "Veronica", "last_name": "Marks", "site": "3" }, "sites": { "name": "Paris" }, "permission": [] }, { "DT_RowId": "row_21", "users": { "first_name": "Perry", "last_name": "Gamble", "site": "3" }, "sites": { "name": "Paris" }, "permission": [ { "id": "2", "name": "Servers" }, { "id": "4", "name": "VMs" } ] }, { "DT_RowId": "row_27", "users": { "first_name": "Ifeoma", "last_name": "Mays", "site": "3" }, "sites": { "name": "Paris" }, "permission": [] }, { "DT_RowId": "row_33", "users": { "first_name": "Rhonda", "last_name": "Harrell", "site": "3" }, "sites": { "name": "Paris" }, "permission": [ { "id": "6", "name": "Accounts" } ] }, { "DT_RowId": "row_4", "users": { "first_name": "Sophia", "last_name": "Morris", "site": "4" }, "sites": { "name": "New York" }, "permission": [ { "id": "6", "name": "Accounts" }, { "id": "3", "name": "Desktop" }, { "id": "4", "name": "VMs" }, { "id": "5", "name": "Web-site" } ] }, { "DT_RowId": "row_10", "users": { "first_name": "Indigo", "last_name": "Brennan", "site": "4" }, "sites": { "name": "New York" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_16", "users": { "first_name": "Wynne", "last_name": "Ruiz", "site": "4" }, "sites": { "name": "New York" }, "permission": [] }, { "DT_RowId": "row_22", "users": { "first_name": "Pandora", "last_name": "Armstrong", "site": "4" }, "sites": { "name": "New York" }, "permission": [ { "id": "6", "name": "Accounts" }, { "id": "3", "name": "Desktop" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_28", "users": { "first_name": "Basia", "last_name": "Harrell", "site": "4" }, "sites": { "name": "New York" }, "permission": [] }, { "DT_RowId": "row_34", "users": { "first_name": "Jocelyn", "last_name": "England", "site": "4" }, "sites": { "name": "New York" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_5", "users": { "first_name": "Kamal", "last_name": "Roberson", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [ { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_11", "users": { "first_name": "Avram", "last_name": "Allison", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [ { "id": "6", "name": "Accounts" }, { "id": "4", "name": "VMs" } ] }, { "DT_RowId": "row_17", "users": { "first_name": "Jessica", "last_name": "Bryan", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [] }, { "DT_RowId": "row_23", "users": { "first_name": "Pandora", "last_name": "Briggs", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [] }, { "DT_RowId": "row_29", "users": { "first_name": "Hamilton", "last_name": "Blackburn", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [] }, { "DT_RowId": "row_35", "users": { "first_name": "Vincent", "last_name": "Banks", "site": "5" }, "sites": { "name": "Singapore" }, "permission": [ { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_6", "users": { "first_name": "Dustin", "last_name": "Rosa", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [ { "id": "6", "name": "Accounts" } ] }, { "DT_RowId": "row_12", "users": { "first_name": "Martha", "last_name": "Burgess", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [ { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" }, { "id": "5", "name": "Web-site" } ] }, { "DT_RowId": "row_18", "users": { "first_name": "Quinlan", "last_name": "Hyde", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "2", "name": "Servers" } ] }, { "DT_RowId": "row_24", "users": { "first_name": "Maris", "last_name": "Leblanc", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [] }, { "DT_RowId": "row_30", "users": { "first_name": "Dexter", "last_name": "Burton", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [ { "id": "3", "name": "Desktop" }, { "id": "1", "name": "Printer" }, { "id": "5", "name": "Web-site" } ] }, { "DT_RowId": "row_36", "users": { "first_name": "Stewart", "last_name": "Chan", "site": "6" }, "sites": { "name": "Los Angeles" }, "permission": [ { "id": "3", "name": "Desktop" } ] } ]}; let dt = $('#example').DataTable( { data: data.data, searchPanes:{ threshold: 1, columns: [ 3 ] }, dom: 'Pfrtip', columns: [ { data: "users.first_name" }, { data: "users.last_name" }, { data: "sites.name" }, { data: "permission", render: { _: '[, ].name', sp:'[].name' }, searchPanes: { orthogonal:'sp' } } ], initComplete: function() { this.api().searchPanes.rebuildPane(); } });} );
300px
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. | |