File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
    <head>
​
    <link href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/colvis/1.0.3/css/ColVis.css">  
  
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
​
<script type="text/javascript" charset="utf-8" src="//cdn.datatables.net/colvis/1.0.3/js/ColVis.min.js"></script>
​
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">           </table>
        </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 () {
  
  var table = $('#example').DataTable({
    
    ajax: {
      url: '/examples/ajax/data/arrays.txt'
    },
    dom: 'frtip<"Submit">',  
    columns: [
      {title: 'Name', data:0},
      {title: 'Input here', data: null, defaultContent: ''} //this will be the input box
    ]
  });
  
 
    $("div.Submit").html('<button type="button" class="btn" id="DetailButton" >Process Data</button>');
    $('#DetailButton').on('click', function () {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 0, 120 )+'...'
        );
    });
  
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers