File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
    <head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.6.0/dt-1.11.3/r-2.2.9/sl-1.3.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.6.0/dt-1.11.3/r-2.2.9/sl-1.3.3/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
          
          
​
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Select Experiment
   </button>
   <div class="modal fade" data-backdrop="false" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLabel">Experiment Datasets</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           <div class = "container-fluid">
              <table id = "data-table" class="cell-border dt-responsive nowrap" style="width:100%"> </table>
           </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div> <!-- end of modal content -->
     </div>
   </div>  <!-- end of modal -->
</div> <!-- end of that column -->
​
        </div>
    </body>
</html>
CSSSaved
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
JavaScriptSaved
 
$(document).ready(function() {
    $(window).on('shown.bs.modal', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    } );
     
  
  $('#data-table').dataTable( {
        ajax: '/ajax/arrays.txt',
    select: true,
        "columns": [
            { "title": "Name" },
            { "title": "Position" },
            { "title": "Office" },
            { "title": "eExtn" },
            { "title": "Start_date" },
            { "title": "Salary" }
        ]
    } );
} );
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers