File
Login or Register via GitHub
<html> <head><link href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.dataTables.css" rel="stylesheet" type="text/css" /><script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.js"></script> <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="advanced-search-body" style="padding-top: 0px !important;"> <form id = "joiningDateSearch"> <div class="form-row"> <div class="form-group col-md-6" style="margin-bottom: 0px !important;"> <label for="Doctor-name">From</label> <input type="date" id="min" class="form-control" > </div> <div class="form-group col-md-6" style="margin-bottom: 0px !important;"> <label for="dob">To</label> <input type="date" id="max" class="form-control" > </div> </div> <button id="btnGo" type="button">Go</button> </form> </div> <div class="container"> <table id="tableId" class="table table-bordered table-striped"> <thead> <tr> <th class='checkbox-control'></th> <th>ID</th> <th>Name</th> <th>Gender</th> <th>Phone</th> <th>Email</th> <th>Specialization</th> <th>Joining</th> <th>Leaving</th> <th>Availability</th> </tr> </thead> <tbody> <tr> <td class="checkbox-control"></td> <td>000000000</td> <td>Muhammed Altamash</td> <td>Male</td> <td>+923012345600</td> <td>m.altamash@gmail.com</td> <td>Orthopedic</td> <td>28/01/2000</td> <td>28/01/2005</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000001</td> <td>Muhammed Shayan</td> <td>Male</td> <td>+923012345601</td> <td>m.shayan@gmail.com</td> <td>General Physician</td> <td>02/02/2003</td> <td>28/09/2006</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000002</td> <td>Paul Walker</td> <td>Male</td> <td>+923012345602</td> <td>paul_walker@hotmail.com</td> <td>ENT Specialist</td> <td>02/02/2009</td> <td>28/09/2015</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000003</td> <td>Bushra Ansari</td> <td>Female</td> <td>+923012345603</td> <td>bushra.ansari@hotmail.com</td> <td>Dermatologist</td> <td>07/09/2001</td> <td>15/03/2019</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000004</td> <td>Javeria Raheem</td> <td>Female</td> <td>+923012345604</td> <td>javeriaraheem321@hotmail.com</td> <td>Dermatologist</td> <td>08/03/2002</td> <td>08/03/2017</td> <td>Leave</span> </td> </tr> <tr> <td class="checkbox-control"></td> <td>000000005</td> <td>Iqra Rafique</td> <td>Female</td> <td>+923012345605</td> <td>iqra.rafique321@gmail.com</td> <td>Dermatologist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000006</td> <td>Saad Siddique</td> <td>Male</td> <td>+923012345606</td> <td>saadsiddique@gmail.com</td> <td>ENT Specialist</td> <td>01/01/2001</td> <td>01/01/2014</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000007</td> <td>Adam Levine</td> <td>Male</td> <td>+923012345607</td> <td>adam.levine@gmail.com</td> <td>Orthopedic</td> <td>01/05/1997</td> <td>01/06/2012</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000008</td> <td>Amir Liaqat</td> <td>Male</td> <td>+923012345608</td> <td>amirliaqat321@gmail.com</td> <td>Orthopedic</td> <td>01/01/2006</td> <td>01/01/2014</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000009</td> <td>Siraj Ahmed</td> <td>Male</td> <td>+923012345609</td> <td>siraj_ahmed321@gmail.com</td> <td>General Physician</td> <td>01/05/2009</td> <td>01/06/2016</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000010</td> <td>Palwasha Tariq</td> <td>Female</td> <td>+923012345610</td> <td>palwasha.tariq@gmail.com</td> <td>General Physician</td> <td>01/05/2004</td> <td>01/06/2018</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000011</td> <td>Junaid Ahmed</td> <td>Male</td> <td>+923012345611</td> <td>junaidahmed321@gmail.com</td> <td>Neurologist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000012</td> <td>Batool Fatima</td> <td>Female</td> <td>+923012345612</td> <td>batool.fatima@gmail.com</td> <td>Neurologist</td> <td>01/03/1994</td> <td>01/03/2014</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000013</td> <td>Donald Trump</td> <td>Male</td> <td>+923012345613</td> <td>donald.trump@hotmail.com</td> <td>Neurologist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000014</td> <td>Natasha Denona</td> <td>Female</td> <td>+923012345614</td> <td>natasha_denona@gmail.com</td> <td>Cosmetologist</td> <td>01/05/2001</td> <td>01/06/2018</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000015</td> <td >William D. Steers</td> <td>Male</td> <td>+923012345615</td> <td>william.d.steers@gmail.com</td> <td>Urologist</td> <td>01/02/2007</td> <td>01/08/2017</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000016</td> <td>Kenneth J. Cherry Jr</td> <td>Male</td> <td>+923012345616</td> <td>kennycherry@hotmail.com</td> <td>Cosmetologist</td> <td>01/05/2012</td> <td>01/06/2017</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000017</td> <td>Stacey E. Mills</td> <td>Female</td> <td>+923012345617</td> <td>stacey_e_mills321@hotmail.com</td> <td>Urologist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000018</td> <td>Paul A. Levine</td> <td>Male</td> <td>+923012345618</td> <td>paullevine321@gmail.com</td> <td>Cosmetologist</td> <td>01/05/2009</td> <td>01/06/2015</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000019</td> <td>Mark D. Miller</td> <td>Male</td> <td>+923012345619</td> <td>mark.miller@yahoo.com</td> <td>General Physician</td> <td>01/05/2007</td> <td>01/06/2015</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000020</td> <td>Mary E. Jensen</td> <td>Female</td> <td>+923012345620</td> <td>mary.jensen@yahoo.com</td> <td>Orthopedic</td> <td>01/05/2003</td> <td>01/06/2018</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000021</td> <td>Paula M. Fracasso</td> <td>Male</td> <td>+923012345621</td> <td>paula.fracasso321@gmail.com</td> <td>Neurologist</td> <td>01/05/2002</td> <td>01/06/2012</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000022</td> <td>James E. Ferguson</td> <td>Male</td> <td>+923012345622</td> <td>james.ferguson21@gmail.com</td> <td>ENT Specialist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000023</td> <td>George A. Beller</td> <td>Male</td> <td>+923012345623</td> <td>georgebeller@gmail.com</td> <td>Orthopedic</td> <td>01/05/2017</td> <td>01/06/2019</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000024</td> <td>John P. DiMarco</td> <td>Male</td> <td>+923012345624</td> <td>john.p.dimarco@gmail.com</td> <td>Dermatologist</td> <td>01/05/2005</td> <td>01/06/2014</td> <td>Leave</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000025</td> <td>Bruce Bateman</td> <td>Male</td> <td>+923012345625</td> <td>bruce.bateman@gmail.com</td> <td>Cosmetologist</td> <td>01/05/2017</td> <td>01/06/2019</td> <td>Not Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000026</td> <td>John Wick</td> <td>Male</td> <td>+923012345626</td> <td>john.wick321@gmail.com</td> <td>Neurologist</td> <td>01/05/2007</td> <td>01/06/2014</td> <td>Available</td> </tr> <tr> <td class="checkbox-control"></td> <td>000000027</td> <td>Eugene J. Barrett</td> <td>Male</td> <td>+923012345627</td> <td>eugene.j.barrett321@gmail.com</td> <td>Orthopedic</td> <td>01/05/2001</td> <td>01/06/2014</td> <td>Not Available</td> </tr> </tbody> <tfoot> <tr> <th></th> <th>ID</th> <th>Name</th> <th>Gender</th> <th>Phone</th> <th>Email</th> <th>Specialization</th> <th>Joining</th> <th>Leaving</th> <th>Availability</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;}td.checkbox-control { background: url('https://img.icons8.com/metro/26/000000/unchecked-checkbox.png') no-repeat center center; padding: 10px; cursor: pointer;}tr.checked td.checkbox-control { padding: 10px; background: url('https://upload.wikimedia.org/wikipedia/donate/a/ac/Ooui-checkbox-selected-focus.svg') no-repeat center center;}th.checkbox-control { background: url('https://img.icons8.com/metro/26/000000/unchecked-checkbox.png') no-repeat center center; padding: 10px; cursor: pointer;}tr.checked th.checkbox-control { padding: 10px; background: url('https://upload.wikimedia.org/wikipedia/donate/a/ac/Ooui-checkbox-selected-focus.svg') no-repeat center center;} var table = $('#tableId').DataTable({ "dom": 'lrtip',"drawCallback": function( settings ) { console.log("DataTables has redrawn the table"); var selected = this.api().rows({page: 'current', selected: true}).count(); var all = this.api().rows({page: 'current'}).count(); if (selected === all) { $('#tableId thead tr').addClass('checked'); } else { $('#tableId thead tr').removeClass('checked'); } }, order: [1], columnDefs: [ { "orderable": false, "targets": 0 }, { targets: [7, 8], type: 'date' } ], select: { select: true, style: 'multi', // Restricting Selection selector: 'tr>td:nth-child(1)' }, }); $('#tableId').on('click','td.checkbox-control', function () { $(this).parent().toggleClass('checked'); }); $('#tableId').on('click','th.checkbox-control', function () { $(this).parent().toggleClass('checked'); if ($(this).parent().is( ".checked" )) { table.rows( {page: 'current'} ).select(); } else { table.rows( {page: 'current'} ).deselect(); } table.rows({selected:true}).every(function() { $(this.node()).addClass('checked'); }); table.rows({selected:false}).every(function() { $(this.node()).removeClass('checked'); }); }); $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) { var valid = true; var min = moment($("#min").val()); if (!min.isValid()) { min = null; } console.log(min) var max = moment($("#max").val()); if (!max.isValid()) { max = null; } if (min === null && max === null) { // no filter applied or no date columns valid = true; } else { $.each(settings.aoColumns, function (i, col) { if (col.type == "date") { var cDate = moment(data[i]); console.log(cDate) if (cDate.isValid()) { if (max !== null && max.isBefore(cDate)) { valid = false; } if (min !== null && cDate.isBefore(min)) { valid = false; } } else { valid = false; } } }); } return valid;}); $("#btnGo").click(function () { $('#tableId').DataTable().draw(); });
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. | |