File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    
    <script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
    <script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script>
    <link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" type="text/css" />
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
     <form id="frm-example" method="post" action="" name="frm-example">
       <table id="example" class="display" cellspacing="0" width="100%">
         <thead>
           <tr>
             <th></th>
             <th>SKU</th>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>9236</td>
             <td>SCHWEDENBOMBEN® KLS 6er x 36</td>
             <td><input type="number" name="row-1-price" value=""></td>
           </tr>
           <tr>
             <td>2</td>
             <td>9100</td>
             <td>SCHWEDENBOMBEN® KLS 6er x 108 Displ.</td>
             <td><input type="number" name="row-2-price"  value=""></td>
           </tr>
           <tr>
             <td>3</td>
             <td>7906</td>
             <td>Manja/Swedy 252 x 6er Chep-Display</td>
             <td><input type="number" name="row-2-price" value=""></td>
           </tr>
         </tbody>
         <tfoot>
           <tr>
             <th></th>
             <th>SKU</th>
             <th>Name</th>
             <th>Price</th>
           </tr>
         </tfoot>
       </table>
       <button type="submit" id="submitButton" name="send_info">send</button>
      </form>
    </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;
}
​
JavaScriptSaved
 
//eneble DataTable
​
var table = jQuery('#example').DataTable({
  'columnDefs': [
    {
      'targets': 0,
      'checkboxes': true
    }
  ],
  'order': [[1, 'asc']]
});
​
​
// Get the form element
var form = jQuery("#frm-example");
​
// Add a click event handler to the submit button
jQuery("#submitButton").on("click", function(e) {
    // Prevent the default form submission
        e.preventDefault();
  
  var rows_selected = table.column(0).checkboxes.selected();
  
  jQuery.each(rows_selected, function(index, rowId){
​
    console.log(rowId);
        });
   });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers